CODEWITHSUNDEEP
jquerycookiesslidetoggle
Aj Troxell
Aj Troxell

Reputation: 265

jQuery Cookies w/ Multiple SlideToggle Menus

I have multiple menus that are using .slideToggle (im learning jQuery currently). Using online tutorials and carious other resources, I think that what I have should be working to remember the state of my slideToggle menus regardless of where they are on the site. There are four menus so far, this could change randomly as I make changes to the site. Here is the structure of the menus:

<aside class="widget">
<h2 class="trigger">Blog Topics</h2>
<ul id="menu-blog-topics" class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Wordpress</h2>
<ul id="menu-wordpress-3" class="menu">
<li></li>
</ul>
</aside>

And my jQuery:

function initMenu() { 
    $('ul.menu').hide(); 
    $('h2.trigger').click( 
            function() { 
                    $(this).next().slideToggle('slow',function(){ 
                            var id = $(this).attr('id'); 
                            if ($(this).is(':hidden')) { 
                                    var state = "closed"; 
                            } else if ($(this).is(':visible')) { 
                                    var state = "open"; 
                            } 
                            return false; 
                     }); 
            } 
    ); 
} 

jQuery(document).ready(function() {initMenu();});

The slideToggle functions properly. The state is just not remembered from page to page.

Upvotes: 1

Views: 813

Answers (1)

lalibi
lalibi

Reputation: 3078

You are just missing some lines to store and retrieve the cookie.

function initMenu() {   
    $('ul.menu').hide();   

    $('h2.trigger').click(   
        function() {   
            $(this).next().slideToggle('slow', function() {   
                var id = $(this).attr('id');   
                $.cookie(id, $(this).is(':hidden') ? "closed" : "open"); 
                return false;   
            });   
        }   
    ); 

    $('h2.trigger').each(function() { 
        var id = $(this).next().attr('id'); 
        if ($.cookie(id) == "open")  $(this).next().show(); 
    }); 
}

jQuery(document).ready(function() {initMenu();});

You can check it out here: http://jsfiddle.net/GZmHY/9/

Upvotes: 2

Related Questions