Drop down menu with on click toggle

Question

I am attempting to create a drop down menu which activates on click rather than on hover. So far I have the on click working with a little javascript, but whilst the sub men

Answer 1

Try this way.

$(document).ready(function () {
    $("li").click(function () {
        //Toggle the child but don't include them in the hide selector using .not()
        $('li > ul').not($(this).children("ul").toggle()).hide();

    });
});

Demo

Answer 2

Better to use slideToggle at the place of toggle:

$(document).ready(function () {
$("li").click(function () {
    $('li > ul').not($(this).children("ul")).hide();
    $(this).children("ul").slideToggle('slow');
});

});

Answer 3

check this fiddle

http://jsfiddle.net/Kritika/SZwTg/1/

               $(document).ready(function () {
                      $("li").click(function () {
                          $('li > ul').not($(this).children("ul")).hide();
                          $(this).children("ul").toggle();
                             });
                        });

or

                $(document).ready(function () {
                     $("li").click(function () {
                         var submenu=$(this).children("ul");
                         $('li > ul').not(submenu).hide();
                         submenu.toggle();
                         });
                    });

on click of "parent 1" it reveals its children and when you click on "parent 2" parent 1's children hide and Parent 2's children show. and if Parent 1's children show you wil be able to hide them by clicking on Parent 1 again.