How do I make a collapsible menu in javascript?

Question

Hi all, how do I made an Expanding and collapsiable menu in java script where clicking on one menu will expand the children inside that and collapse other expanded menu?

Answer 1

The easiest way to do this is with a jQuery plugin like this one:
http://plugins.jquery.com/project/accordion

Answer 2

in jQuery:

$(".toggle-control").click(function(){
    $(".target-div").hide();
    $(this).next().show();
});

if your html is something like this:

<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>
<p class="toggle-control">Click to expand</p>
<div class="target-div">some text here</div>

Answer 3

Besides one of SO's running jokes for an answer, what you're wanting is an accordion menu (maybe not for the effects, but for the containment of the entire menu).

Here's a library-less solution: Javascript And CSS Tutorial - Accordion Menus.

Or, an accordion-specific library/script: http://www.stickmanlabs.com/accordion/

Otherwise, if you're up for using a library and add-ons, there's plenty of options: 10 Javascript Accordion Scripts.