Grow your CSS skills. Land your dream job.

Accordian Menu Tree

  • # April 22, 2010 at 5:12 pm

    I have created a javascript accordian menu to replace a flash tree menu.

    http://www.redlightpr.com/NAV/menuE-Test.php

    I have worked out how to add an additional level in PRESS. 2010, 2009, 2008, Celebrity Sightings. But when I click on 2010 it opens, but does not close automatically when say 2009 is clicked on. The other Parents open and close. I’m pretty new to javascript, so this is a touch beyond me, but hey I a quick study.

    Any help will be appreciated.
    Cheers

    Stephen

    PS. Heres the menu.js in case it helps.

    function initMenus() {
    $(‘ul.menu ul’).hide();
    $.each($(‘ul.menu’), function(){
    $(‘#’ + this.id + ‘.expandfirst ul:first’).show();
    });

    $(‘ul.menu li a’).click(
    function() {
    var checkElement = $(this).next();
    var parent = this.parentNode.parentNode.id;

    if($(‘#’ + parent).hasClass(‘noaccordion’)) {
    $(this).next().slideToggle(‘normal’);
    return false;
    }
    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’);
    checkElement.slideDown(‘normal’);
    return false;
    }
    }
    );
    }
    $(document).ready(function() {initMenus();});

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".