[jQuery] Re: Not a plugin but code for anyone trying to have collapse-able menu with cookies

[Karl Swedberg]

Hi Bhaarat,
You've done a nice job here! I was wondering, though, if we could take  
advantage of the index value of the links, so I re-factored your code  
a bit (still using Klaus's cookie plugin). Here is what it looks like:

$(document).ready(function() {
  $('#menu li ul').hide();
  var cookieValue = $.cookie('menuCookie') || '';
  $('#menu > li > a').each(function(index) {
    var $this = $(this), $checkElement = $this.next('ul');
    if (cookieValue.indexOf(index) > -1) {
      $checkElement.show();
    }
    $this.click(function() {
      if ($checkElement.is(':hidden')) {
        $checkElement.slideDown();
        cookieValue = cookieValue + index;
        $.cookie('menuCookie', cookieValue);
      } else {
        $checkElement.slideUp();
        cookieValue = cookieValue.replace(index,'');
        $.cookie('menuCookie', cookieValue);
      }
      return false;
    });
  });
});

I put up a little demo page here:

http://test.learningjquery.com/cookie-menu.html

On the demo page, I also added a little function to show the value of  
the cookie and called the function onready and onclick:

function showCookie() {
  if (!$('#jar').length) {
    $('<div id="jar"></div>').appendTo('body');
  }
  $('#jar').text(document.cookie);
}

Cheers,

--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 29, 2008, at 1:41 PM, Bhaarat Sharma wrote:


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();});