Saving state with the jQuery Accordion Menu

I have been working on the new True Negative website pretty much non-stop lately and I’m using several differernt things from the jQuery JavaScript library. One of these is the jQuery Accordion Menu, from their User Interface library. It’s a great simple menu that can be implemented with very little javascript code.

One thing that it doesn’t inherently support is saving the state between webpages, which is something I had wanted since I’m using it as a menu, not just for content display. Functionally, I knew what had to be done in order to get it to save state. It was obvious that I needed to use cookies and some quick javascript to save what menu was open. I then came across the jQuery Cookie plugin, which really simplifies working with cookies in jQuery.

Setting a cookie with the plugin is as simple as follows:

$.cookie('cookiename', 'cookiecontents');

The accordion menu has an event change attribute, which can be set to a function or just inline code. Using both this feature and the cookie plugin, it was very simple to write the code that I needed in order to get the result I wanted. Here is the code and I will explain it below:

// accordion menu
$('#menu').accordion({
	header: 'h3',
	navigation: true,
	active: '.selected',
	autoHeight: false,
	clearStyle: true,
	collapsible: true,
	alwaysOpen: false,
	animated: 'slide',
	change: function(event,ui) {
		var hid = ui.newHeader.children('a').attr('id');
	if (hid === undefined) {
		$.cookie('menustate', null);
	} else {
		$.cookie('menustate', hid, { expires: 2 });
	}
}
});

// check cookie for accordion state
if($.cookie('menustate')) {
	$('#menu').accordion('option', 'animated', false);
	$('#menu').accordion('activate', $('#' + $.cookie('menustate')).parent('h3'));
	$('#menu').accordion('option', 'animated', 'slide');
}

The first section is pretty straightforward. It defines and applies the accordion menu to a div tag with an id of menu. All of the various options are laid out in the Accordion docs and I just set some of the standard ones in order to get the look and feel that I wanted. The important part is the change option:

change: function(event,ui) {
		var hid = ui.newHeader.children('a').attr('id');
	if (hid === undefined) {
		$.cookie('menustate', null);
	} else {
		$.cookie('menustate', hid, { expires: 2 });
	}

Here you can see that I check the value of the menu that is open to see if it is undefined, which would mean the menu is closed. If it is open, it will have a value in there, so I store that in a cookie called “menustate” for use when the page is reloaded.

// check cookie for accordion state
if($.cookie('menustate')) {
         $('#menu').accordion('option', 'animated', false);
         $('#menu').accordion('activate', $('#' + $.cookie('menustate')).parent('h3'));
         $('#menu').accordion('option', 'animated', 'slide');

Upon page reload I have it check the “menustate” cookie to see if it has been set or not. If it is, I first turn off the animation so the visitor does not see it open again, then I call the activate method to open the one with the id that is stored in the cookie. Lastly, I reenable the animation. It works great!

Unfortunately, I have no completed the True Negative site yet, so I do not have an example of this working. As soon as I finish the site, I’ll update this blog post with a link to it. Hope this helps anyone trying to do this in a simple way. Thanks for reading!