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