Grow your CSS skills. Land your dream job.

jQuery Nested Accordion Menu + Cookies Help

  • # January 20, 2010 at 6:58 pm

    Thanks to everybody in advance for your help!

    I’ve got a jQuery primary menu implemented and functioning with an additional expanding secondary sub-menu.

    You can see it here: http://new.perspectivestudio.com

    I’ve had success getting the primary menu to save its state using cookies, but have run into problems with the cookies saving the state of the sub-menu after being clicked by a visitor.

    Any help you can provide me with getting my cookies to save the state of my sub-menu would be extremely appreciated.

    See jQuery code below:

    Code:
    function initMenus() {

    $(‘ul.menu ul’).hide();

    $.each($(‘ul.menu’), function(){
    var cookie = $.cookie(this.id);
    if(cookie === null || String(cookie).length < 1) {
    $('#' + this.id + '.expandfirst ul:first').show();
    }
    else {
    $('#' + this.id + ' .' + cookie).next().show();
    }
    });

    $('ul.menu li a').click(
    function() {

    var checkElement = $(this).next();
    var parent = this.parentNode.parentNode.id;

    if($('#' + parent).hasClass('noaccordion')) {
    if((String(parent).length > 0) && (String(this.className).length > 0)) {
    if($(this).next().is(‘:visible’)) {
    $.cookie(parent, null);
    }
    else {
    $.cookie(parent, this.className,{expires: 1});
    }
    $(this).next().slideToggle(‘normal’);
    }
    }
    if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
    if($(‘#’ + parent).hasClass(‘collapsible’)) {
    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
    }
    return false;
    }
    if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
    if((String(parent).length > 0) && (String(this.className).length > 0)) {
    $.cookie(parent, this.className,{expires: 1});
    }
    checkElement.slideDown(‘normal’);
    return false;
    }
    }
    );
    }
    $(document).ready(function() {initMenus();});

    HTML Code:

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".