Hi, I took the code from jQuery Accordion menu and am using the cookie plugin.
while searching for a collapse-able menu I saw that a lot of people were looking for this but with cookies so when user refreshes..the collapse/expand state stay the same. I am new to jQuery and even javascript. But here I have jotted down something which is working for me. Experts out there: if you would like to add some suggestions on how to better do this..i'd appreciate it. I dont like the fact that i am different cookies for different menu items... function initMenu() { $('#menu ul').hide(); if ($.cookie('the_cookie1')=='a'||$.cookie('the_cookie2')=='b'|| $.cookie('the_cookie3')=='c'|| $.cookie('the_cookie4')=='d') { if ($.cookie('the_cookie1')=='a') $("a").filter(".a").next().slideDown('fast'); if ($.cookie('the_cookie2')=='b') $("a").filter(".b").next().slideDown('fast'); if ($.cookie('the_cookie3')=='c') $("a").filter(".c").next().slideDown('fast'); if ($.cookie('the_cookie4')=='d') $("a").filter(".d").next().slideDown('fast'); } $('#menu li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { removeCookie($(this).attr('class')); checkElement.slideUp('fast'); } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { setCookie($(this).attr('class')); checkElement.slideDown('fast'); return false; } }); /*$('#menu li a').click( function() { setCookie($(this).attr('class')); $(this).next().slideToggle('normal'); } );*/ } function setCookie(some) { var s = some; if (s=='a') $.cookie('the_cookie1', s); else if (s=='b') $.cookie('the_cookie2', s); else if (s=='c') $.cookie('the_cookie3', s); else if (s=='d') $.cookie('the_cookie4', s); // alert('cookie set ' + s); } function removeCookie(some1) { var s = some1; if (s=='a') $.cookie('the_cookie1',null); else if (s=='b') $.cookie('the_cookie2',null); else if (s=='c') $.cookie('the_cookie3',null); else if (s=='d') $.cookie('the_cookie4',null); } $(document).ready(function() {initMenu();});