jquery: cookie with collapsible menu

[lauthiamkok]

Hi,

I have different sets of list collapsible menu, ideally if a certain set is contracted then the cookie of that set list will be stored and it stays closed when you next visit or go to other pages.

This is the code I modified from here http://ifohdesigns.com/blog/tutorial...e-with-cookies

But the problem is all sets of menu will stay closed even if it is only a set is being clicked!

$("#menu_side h2").click(function(){

	if ($(this).next().is(":hidden")) {
	
		$(this).next().slideDown("slow");
		$(this).find("img").attr({src: "img_layout/bullet_expanded.png"});
		$.cookie('showTop', 'collapsed');
		return false;
	
	} else {
	
		$(this).next().slideUp("slow");
		$(this).find("img").attr({src: "img_layout/bullet_contracted.png"});
		$.cookie('showTop', 'expanded');
		return false;
	
	}
  
});


// COOKIES
var cookie = $.cookie('showTop');
if (cookie == 'collapsed') {
	 $("#menu_side h2").next().show("fast");
	 $("#menu_side h2").find("img").attr({src: "img_layout/bullet_expanded.png"});
}else {
	$("#menu_side h2").next().hide("fast");
	$("#menu_side h2").find("img").attr({src: "img_layout/bullet_contracted.png"});
}

How can I fix it...? it must be this bit is not correct??

// COOKIES
var cookie = $.cookie('showTop');
if (cookie == 'collapsed') {
	 $("#menu_side h2").next().show("fast");
	 $("#menu_side h2").find("img").attr({src: "img_layout/bullet_expanded.png"});
}else {
	$("#menu_side h2").next().hide("fast");
	$("#menu_side h2").find("img").attr({src: "img_layout/bullet_contracted.png"});

this is the html,

<div id="menu_side" class="right">
        <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Comparative Areas</h2>
        <ul>
            <li><a href="#">GF 0: Visual Index  &laquo;</a></li>
            <li><a href="#">GF 1: Antarctica and Outsplay</a></li>
            <li><a href="#">GF 2: North West Atlantic & Pacific</a></li>
            <li class="last"><a href="#">GF 3: To the Tropics: North</a></li>
        </ul>
        
        <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> GF Tech (Ocean Earth)</h2>
        <ul>
            <li><a href="#">GF Tech 1: Water-Based Energy</a></li>
            <li><a href="#">GF Tech 2: Water Cycles Buildup</a></li>
            <li><a href="#">GF Tech 3: Return to Food Chain</a></li>
            <li class="last"><a href="#">GF Tech 4: Sediment Extraction</a></li>
        </ul>
        
        <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Controversies</h2>
        <ul>
            <li><a href="#">Global Warming</a></li>
            <li><a href="#">Nuclear Power</a></li>
            <li><a href="#">Science Errors</a></li>
            <li><a href="#">River Damage</a></li>
            <li><a href="#">Ecological Taxes</a></li>        
        </ul class="last">
        
        <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Applications</h2>
        <ul>
            <li><a href="#">Europe</a></li>
            <li><a href="#">Africa</a></li>
            <li><a href="#">East Asia </a></li>     
        </ul class="last">
        
        
        </div>

this is the test site to see how it works...
http://lauthiamkok.net/tmp/projects/globalfeed/home

Let me know if u have any ideas... thanks!

Best,
Lau

[tomws]

The accordions open and close fine here. None of your links point off-page so there's no way to test whether the open/close status works across pages.

[lauthiamkok]

Originally Posted by tomws

The accordions open and close fine here. None of your links point off-page so there's no way to test whether the open/close status works across pages.

hi, if u click on one of the set lists and refresh your browser then you can see how the cookie works ... thanks

[tomws]

You're only setting a cookie with one value and using that one value to control all accordions. If you want to maintain the individual accordions' state, you're going to need to store several values or several cookies.

[lauthiamkok]

Originally Posted by tomws

You're only setting a cookie with one value and using that one value to control all accordions. If you want to maintain the individual accordions' state, you're going to need to store several values or several cookies.

oh i see! any starting point which I can modify code below further? (I assume this is the code I should make to store several values...?)

// COOKIES
var cookie = $.cookie('showTop');
if (cookie == 'collapsed') {
	 $("#menu_side h2").next().show("fast");
	 $("#menu_side h2").find("img").attr({src: "img_layout/bullet_expanded.png"});
}else {
	$("#menu_side h2").next().hide("fast");
	$("#menu_side h2").find("img").attr({src: "img_layout/bullet_contracted.png"});

thanks

[tomws]

That part is just opening/closing based upon the cookie value. You'll want to modify the cookie-setting part. I think it's in this function:

$("#menu_side h2").click(function(){

I can't help with how to set multiple values since I've not done that myself. A quick glance at the documentation suggests that it needs to be one value per cookie, so the multiple cookie route may be necessary.

Also, glancing again at that code, you're going to need to further modify it because you're only acting on the h2 elements as a whole rather than on individual h2 elements. Setting an id for each would be an easy way to address each, and then you can store and retrieve the status of each quite easily.

[lauthiamkok]

Originally Posted by tomws

That part is just opening/closing based upon the cookie value. You'll want to modify the cookie-setting part. I think it's in this function:

$("#menu_side h2").click(function(){

I can't help with how to set multiple values since I've not done that myself. A quick glance at the documentation suggests that it needs to be one value per cookie, so the multiple cookie route may be necessary.

Also, glancing again at that code, you're going to need to further modify it because you're only acting on the h2 elements as a whole rather than on individual h2 elements. Setting an id for each would be an easy way to address each, and then you can store and retrieve the status of each quite easily.

thank you at least I know where to start from. thanks!