jQuery cookie to remember which nav list is open?

Question

I have cobbled the below together in my (very) humble jQuery hackish way:

$(".toggle_container").hide();
                $(".trigger a").addClass("close");
                $(".trigger a").click(function() {
                $(".toggle_container").slideUp('200','swing');
                 $(".trigger a").removeClass("open").addClass("close");
                    if     ($(this).next(".toggle_container").is(":hidden")) {
                            $(this).next(".toggle_container").stop(true,false).slideToggle('200','swing');

                        }
                });

jsfiddle is here: http://jsfiddle.net/FWzWu/8/

I have never used the jquery cookie plugin, but would like to use it now to remember the users menu state from page to page. Using the github plugin here: https://github.com/carhartl/jquery-cookie

Any help is most appreciated! Thanks!

Answer 1

A first stab (I added a call to event.preventDefault() to stop the default anchor action from happening on click - you may need to remove this).

It could do with some cleaning up, for example it would be good to take advantage of event delegation to capture the click event on anchor elements, hopefully it conveys how to use the plugin and where to use it.

 $(function () {   

    // give each container a unique class
    var containers = $("ul.toggle_container").hide().each(function (i,v) {
        $(this).addClass('container_' + i);       
    });

    var value = $.cookie('toggled_container');     

    // if we have a value in the cookie, use it to show that container
    if (value) {
        $('ul.' + value).show();
    }

    var anchors = $("li.trigger a");

    anchors.addClass("close").click(function() {
        containers.slideUp('200','swing');
        anchors.removeClass("open").addClass("close");
        var nextContainer = $(this).next("ul.toggle_container");
        if (nextContainer.is(":hidden")) {
            // capture the unique class that we have given the container
            $.cookie('toggled_container', nextContainer.attr('class').match(/container_\d+/));
            nextContainer.stop(true,false).slideToggle('200','swing');
        }
    });
});

Obviously, this solution assumes that your containers are never going to change in number and order; if they do, the wrong container will end up being expanded on page load :)

Answer 2

On the page you list (the github one) there is a readme, I've never used the plugin but it looks simple enough.

Make sure you include the script;

<script src="/path/to/jquery.cookie.js"></script>

Now every time you want to change the cookies value (or create the cookie in the first place) use;

$.cookie('cookie_name', 'cookie_value', { expires: 7 });

change *cookie_name* and *cookie_value* to whatever you desire. For example

$.cookie('nav_choice', '1', { expires: 7 });

Then every time you load the page run this inside the document.ready;

var nav = $.cookie('nav_choice');

Then you can run if() statements to determine what to display.

Does this help? I can elaborate if necessary.