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!

Code:
$("#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??

Code:
// 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,

Code:
<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