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 🙂