Question

I have an accordion style navigation list set up so that when categories are clicked it opens up to show sub-categories that link to pages.

What I would like to do is have the accordion navigation list keep it’s open or closed state when the new page opens.

I’ve gathered that cookies work to retain the state on refresh, but how do I retain the state when a different page is visited? All the pages have the same accordion navigation list.

Answer 1

I found a solution, it uses the accordian plug-in found here, http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi and the jquery cookie.js plug-in

I added id’s to the header anchor tages in the HTNL mark-up like so,

 <li>
        <a id="m1" class="label" href="#">Sound/Audio Systems</a>
        <ul class="acitem">
            <li><a href="products.php?sub_cat=PA_Systems">PA Systems</a></li>
            <li><a href="#">Loudspeakers</a></li>
            <li><a href="#">Microphones </a></li>
            <li><a href="#">DJ Equipment</a></li>
            <li><a href="#">Sound Processing Equipment</a></li>
        </ul>
    </li>

And modified the accordian.js code, I added the lines beginning with $.cookie, and the If statement in the document.ready funciton.

jQuery.fn.initMenu = function() {  
return this.each(function(){
    var theMenu = $(this).get(0);
    $('.acitem', this).hide();
    $('li.expand > .acitem', this).show();
    $('li.expand > .acitem', this).prev().addClass('active'),
    currentID = "";
    $('li a', this).click(
        function(e) {
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;
            if($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).prev().addClass('active');
                        currentID = $(this).prev().attr('id');
                        $.cookie('menustate', currentID, {expires: 2, path: '/'});
                    }
                    else {
                        $(this).prev().removeClass('active');
                        $.cookie('menustate', null, {expires: 2, path: '/'});
                    }    
                });
                return false;
            }
            else {
                if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                    if($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', 
                        function() {
                            $(this).prev().removeClass('active');
                            $.cookie('menustate', null, {expires: 2, path: '/'});
                        }
                    );
                    return false;  
                }
                return false;
            }
            if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                $('.acitem:visible', parent).first().slideUp('normal', function() {
                    $(this).prev().removeClass('active');
                    $.cookie('menustate', null, {expires: 2, path: '/'});
                });
                theElement.slideDown('normal', function() {
                    $(this).prev().addClass('active');
                    currentID = $(this).prev().attr('id');
                    $.cookie('menustate', currentID, {expires: 2, path: '/'});
                    });
                    return false;
                }
            }
        }
    );
});

};



$(document).ready(function() {
$('.menu').initMenu();$('#side-navigation_frame').show();
if ($.cookie('menustate')) {
    var anchor = "",
        elementID = $.cookie('menustate');
    anchor = document.getElementById(elementID);
    $(anchor).addClass('active');
    $(anchor).next().show();

}
});

It works nicely, not bad for a beginner, thanks for all the advise.

Rob Fenwick