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!

jQuery(document).ready(function() {

var selected = readCookie(‘activeMkt’);
var select = -1;
if (selected){
select = parseInt(selected);
}

$( “#accordion” ).accordion({
header: ‘h3′,
autoHeight: false,
navigation: true,
collapsible: true,
alwaysOpen: false,
animated: ‘slide’,
active: select,
change: function(event,ui) {
var sel = ui.newHeader.children(‘a’).attr(‘id’);
if (sel === undefined) {
setCookie(‘activeMkt’,'-1′);
} else {
setCookie(‘activeMkt’,sel);
}
}
});

});

EINS
EIN

ZWEI
ZWE

DREI
DRE

$(document).ready(function() {
$(‘#accordion’).accordion({
autoHeight: false,
collapsible: true,
active: false,
change: function(event,ui) {
var index = ui.options.active;
if (index > -1) {
$.cookie(‘accidx’, index, {expires: 2, path: ‘/’});
}
}
});
if ($.cookie(‘accidx’) > -1) {
var idx = Number($.cookie(‘accidx’));
$(‘#accordion’).accordion(‘option’, ‘animated’, false);
$(‘#accordion’).accordion(‘activate’,idx);
$(‘#accordion’).accordion(‘option’, ‘animated’, ‘slide’);
}
});

It’s ok when it’s opening but when closing a panel it’s not smooth at all.