jQuery toggle menu dropdown

Question

I am working on a menu navigation that has parent horizontal bar as static and a vertical accordion child menu that interacts with the parent.

I have them working fine except one part where I want to toggle show() and hide() child menu when clicked on the same parent menu item.

I've looked at toggle() jQuery API but couldn't get it working properly.

The following is only a script for parent part which I got rid of toggle() for now.

$(function () {

    $('#mainMenu > ul > li > a').click(function () {
        $('#mainMenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        if ($(this).text() == "1st click") {
            $('#subMenu > ul').siblings().hide();
            $('#subMenu > ul:nth-child(1)').show();
        } else if ($(this).text() == "2nd click") {
            $('#subMenu > ul').siblings().hide();
            $('#subMenu > ul:nth-child(2)').show();
        }
    });
});

The Full code that isolates the problem is available here

Answer 1

This should do it. Enjoy :) Example: http://jsfiddle.net/duqQN/4/

$('#mainMenu > ul > li > a').click(function () {
    var position = $(this).parent().index() + 1;
    $('#mainMenu li a').not($(this)).parents('li').removeClass('active');
    $(this).closest('li').toggleClass('active');
    if ($(this).parents('li').hasClass('active')) {
        $('#subMenu > ul').hide();
        $('#subMenu > ul:nth-child('+position+')').show();
    } else {
        $('#subMenu > ul').hide();
    }
});

Answer 2

i modified the fiddle like that:

$(function () {

    $('#mainMenu > ul > li > a').click(function () {
        $('#mainMenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        if ($(this).text() == "1st click") {
            if($('#subMenu > ul:nth-child(1)').hasClass('active')){
                $('#subMenu > ul:nth-child(1)').hide();
                $('#subMenu > ul:nth-child(1)').removeClass('active');
            }
            else{$('#subMenu > ul:nth-child(1)').show();
                 $('#subMenu > ul:nth-child(1)').addClass('active');
            }
        } else if ($(this).text() == "2nd click") {
            if($('#subMenu > ul:nth-child(2)').hasClass('active')){
                $('#subMenu > ul:nth-child(2)').hide();
                $('#subMenu > ul:nth-child(2)').removeClass('active');
            }
            else{$('#subMenu > ul:nth-child(2)').show();
                 $('#subMenu > ul:nth-child(2)').addClass('active');
            }
        }
    });


    $('#subMenu > ul > li > a').click(function () {
        $('#subMenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#subMenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }
        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    });
});

I just used one more if/else in if ($(this).text() == "1st click") and if ($(this).text() == "2st click") .

I hope this is what you wanted. But I think there are better ways with less code to realize that.

Answer 3

I think this could possibly help you out: (toggles between show +More or +Less)

$("#lnkMore").click(function() {

$("#divMore").slideToggle("slow"); $(this).text($(this).text() == $("#hidLess").text() ? $("#hidMore").text():$("#hidLess").text()); return false; });

Answer 4

Okay, so after a while messing with your really messy code, I got it.

Made checkElement a global variable (defined it outside of functions, so the value stored in it can be reused in other functions) and checked if it existed.

     if(undefined != checkElement ){
            checkElement.slideUp('normal');
    }

The code is really messy and shouldn't be as specific as it is, whenever I have some time I'll go back to it and try to make it simpler. Here you go: http://jsfiddle.net/duqQN/7/

For the 'active' check just made a general look up for 'li.active' and removed if found.

EDIT: Here's the code mixed with Stuart Kershaw's code: http://jsfiddle.net/duqQN/9/

Hope this helps!