Question

$(function(){
    $("li.level2").hide();
    $("li.level3").hide();

    $("ul.navigation").delegate("li.level1", "click", function() {
        $("li.level2").toggle().siblings("li.level3").hide();;
    });

    $("ul.navigation").delegate("li.level2", "click", function() {
        $("li.level3").toggle();
    });
});

I’m using this script to make a drop down menu for my page in jquery, but currently when you click on a level1 list it opens up every level1, when i just want to open the one that was clicked on. ie. it is doing this when i click on the first 1:

1

    2

1

    2

when i want it to do this

1

    2

1

I understand you can use the $this function to only open the one selected, but i am unsure how to implement it and whenever i try (this).next it only opens the next one when

I included an active page with styling to make it easier to interpret: http://jsfiddle.net/K6TSv/1045/

thanks for your help in advanced, this has been driving my head on.

Answer 1

get the clicked item using $(this) and then get the next level2 items and show that.

$("ul.navigation").delegate("li.level1", "click", function() {
    var item=$(this);
    item.next(".level2").toggle();      
});

jsfiddle Sample : http://jsfiddle.net/K6TSv/1046/

If i were doing this. I would create a hierarchical HTML markup to handle this which will make things easy

EDIT : As per the comment ( Markup changed!!!)

If you want to select elements based on some selection criteria unitl some element, Use nextUntil function.

$(this).nextUntil(".level1",".level2").toggle();

Sample http://jsfiddle.net/K6TSv/1072/