$(function () {
var myact = false;
$( “#myaccordion” ).accordion({
clearStyle: true,
collapsible: true, // allow to close completely
create: function (event, ui) {
//get index in cookie on accordion create event
if (($.cookie(‘saved_index’) != null) && ($.cookie(‘saved_index’) != ‘false’)) {
myact = parseInt($.cookie(‘saved_index’));
}
},
change: function (event, ui) {
//set cookie for current index on change event
myact = ui.options.active;
$.cookie(‘saved_index’, null, { expires: 2, path: ‘/’ }); // session cookie
$.cookie(‘saved_index’, myact, { expires: 2, path: ‘/’ });
},
active: ($.cookie(‘saved_index’) == null) ? 0 : ($.cookie(‘saved_index’) == ‘false’) ? false : parseInt($.cookie(‘saved_index’))
});
});

cookie plugin can be found here: https://github.com/carhartl/jquery-cookie

I’ve put it on jsbin for easy cut’n'pasting
It only works in edit mode though,
http://jsbin.com/ekuhap/1/edit

thanks!

I have two menu’s which needs to be ‘remembered’ by the browser.
1. A menu that is hidden initially and shown when clicked on a link
2. I have put ‘help-hints’ allover the site. There is a button to hide the hint icons.

What I want is : Once that main menu is shown, it should stay shown while browsing through the pages. Same with the hint icons. When someone clicks on the link that hides/shows the hint icons, they should get hidden/displayed.

The following is my code :

JQuery :

jQuery(‘.slideout’).click(function() {
jQuery(‘.sf-green’).slideToggle();
jQuery(‘.slideout, .slidein’).toggleClass(‘slidein slideout’);
});

jQuery(‘#infobutton’).click(function(){
jQuery(‘.info_on, .info_off’).toggleClass(‘info_off info_on’);
jQuery(‘.hint, .hintoff’).toggleClass(‘hintoff hint’);
});

HTML

Main Menu

Help »

Any help will be great!

Thank you!