Has anyone tried using the JQuery Cookie Plug in?

I am trying to get a basic accordion to work using Unordered lists (I.e. sidebar). Unfortunately when you click on any item and go to the next page the accordian that was expanded does not stay that way.

Anything I should be doing to tell SS to pay attention to Cookies?

Hi

Yes, I already used jQuery Cookie in a SilverStripe Site. Didn't encounter any problems.
Do you mind sharing your JS code, so we can try to spot the issue?

Not at all! I will drop an update to this topic tonight once I get home from work. Thanks !!!!

Banal et al:

here is the accordion I am trying to accomplish (noaccordion or collapsible):

http://www.i-marco.nl/weblog/jquery-accordion-menu-redux2/

I am using the jQuery 1.2.1 - New Wave Javascript
and also the jquery cookie plugin

I have not altered either of the above files.

Here is the sidebar.ss snippet:

You will notice I added $ID intosome of the classes. I did this because it seemed per the scripting there needed to be a unique identifier, i figured the $ID would give me this since there shouldn't be repetition of the page id's.

one last thing. The <% if ApplyAccordian %> is simply a Boolean checkbox I added so that I could remove the hyperlink from the link making it a clickable item (activating the accordian) without SS applying that page hyperlink. Not sure if that was clear haha!

Thanks for taking a peek.

<ul id="Menu2" class="menu collapsible" >
		  	<% control Menu(2) %>
  	    		<% if Children %>
				
				<% if ApplyAccordian %>
				
			  	    <li class="$LinkingMode $ID" id="moreLinks"><a href="#" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
				<% else %>	
				
			  	    <li class="$LinkingMode $ID"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
				<% end_if %>
					
	  	    	<% else %>
		  			<li><a href="$Link $ID" title="Go to the $Title.XML page" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
				<% end_if %>	  
	  		
	  			
	  				<% if Children %>
						<ul class="sub">
							
									<% control Children %>
										<li class="$ID"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levelb $ID">&raquo;  $MenuTitle.XML</a></li>
									<% end_control %>
								
						</ul>
			 		
				<% end_if %> 
			</li> 
  			<% end_control %>
  		</ul>

This is the menu.js file:

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		var cookie = $.cookie(this.id);
		if(cookie === null || String(cookie).length < 1) {
			$('#' + this.id + '.expandfirst ul:first').show();
		}
		else {			
			$('#' + this.id + ' .' + cookie).next().show();
		}
	});
	$('ul.menu li a').click(
		function() {

			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				if((String(parent).length > 0) && (String(this.className).length > 0)) {
					if($(this).next().is(':visible')) {
						$.cookie(parent, null);
					}
					else {
						$.cookie(parent, this.className);
					}
					$(this).next().toggleoggle();
				}				
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').toggle();
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').toggle();
				if((String(parent).length > 0) && (String(this.className).length > 0)) {
					$.cookie(parent, this.className);
				}
				checkElement.toggle();
				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});

Hi

I didn't check all of your code, but it seems like the script is using the ID as identifier, whereas you put the $ID in the class of the element.
Instead of this

<li class="$LinkingMode $ID" id="moreLinks"><a href="#" class="$LinkingMode levela $ID">$MenuTitle.XML</a></li>

Try something like this:

<li class="$LinkingMode" id="menu$ID"><a href="#" class="$LinkingMode levela" id="link$ID">$MenuTitle.XML</a> 

for your menu items.

I also wondered about this bit in your code:

$(this).next().toggleoggle();

This doesn't appear in the original source and will probably cause a JavaScript error.
Do you really have a jquery cookie problem? It seems like your script wouldn't work at all ;)

Second set of eyes always helps! I actually switched that part of the code as it originally was a slideToggle. i changed it to just plain toggle. looks like i typo's pretty badly there!

I fixed that portion so now it reads:

$(this).next().toggle();

I also did your suggestion about changing the way i am using unique identifiers (link$ID and menu$ID). That was much cleaner than what I was doing.

Unfortunately those two changes still are not allowing the accordion to stay open.

just to make sure I also inserted the orginal menu.js file to test that and still no luck.

Anything I need to in terms of calling the cookie script aside from making it a requirement? should I hardcode it into the head? I am wondering too maybe about the doctype? Just throwing ideas out there!

So, the more I am thinking about this code, i am wondering if it even does what I want it to.

I included a screen shot of the sidebar navigation.

What i want to happen is that if the person expands the accordion, and chooses one of the sub links, when he gets to that page, the accordian remains expanded.

Is this what is supposed to occur with this? IF not, is there something different I should be using?

So you're saying that the accordion works, it just doesn't stay open?
The page you took the accordion from keeps it open even if I refresh the page, so it should work. Although when I have a look at their markup, they only set the id on the menu (<ul>) itself.
I suggest you use the same script as on their site and try to structure the menu exactly like they do. After that, you can still add custom markup.

Do you use firebug (http://getfirebug.com)? It can really help in debugging such things.