Question

I want to create a multilevel menu using jQuery.

The main idea is by default all of the child menu items are collapsed.
By clicking on plus expands only child of the clicked element. By clicking again it hides.

I have set up a fiddle with basic code i`ve managed to do http://jsfiddle.net/mNW3c/1/

It is has problems – i can`t get to show/hide elements proper one by one. Please help me to improve it.

Thanks in advance!

Answer 1

You need to specify a context for the show/hide statement. Right now, it just grabs them all. In this part of the code

$('.has-child .plus').click(function(){
    $('.has-child.hover > ul').toggle('slow');
});

You need to specify that we are looking for the first ul of this .plus‘s parent. You can do that with this:

$('.has-child .plus').click(function(){
    $('ul:first', this.parentNode).toggle('slow');
});

Demo