jquery/javascript menu issue .siblings() .toggle()
<p>I have coded a 3 level drop down menu in jquery and everything is working perfectly except for when I collapse the top level, it doesn't collapse the third level, i.e.:</p>

<pre><code>level 1
level 2
level 3
</code></pre>

<p>when I collapse it I get:</p>

<pre><code>level 1
level 3
</code></pre>

<p>when it should read:</p>

<pre><code>level1
</code></pre>

<p>I understand you can do this using the silbing function, but I then run into problems because I am using a toggle class as well to change an arrow either facing right or down depending on whether or not the menu is open. It closes the two sub menu levels, but doesn't toggle them so when you reopen that menu the arrows are still facing down when they should be facing right.</p>

<p>Here is my source:</p>

<pre><code>$(function() {
    $("li.level2").hide();
    $("li.level3").hide();

    $("ul.navigation").delegate(".level1", "click", function() {
        var item=$(this);
        $(this).nextUntil(".level1", ".level2", ".level3").toggle();
        $(this).toggleClass("highlight");
    });

    $("ul.navigation").delegate(".level2", "click", function() {
        var item=$(this);
        $(this).nextUntil(".level2",".level3").toggle();
        $(this).toggleClass("highlight");
    });
}); 
</code></pre>

<p><a href="http://jsfiddle.net/qM62Z/" rel="nofollow">Jsfiddle here</a>. Basically green is level 1 orange is level 2 and red is when the menu is open, if you click on "algebra" and then "year 11" so 2 sub menus are open then click on algebra again it doesn't close the submenus under year 11, and when you use .siblings() the toggle function isn't activated so when you click on "algebra" again to reopen it, "year 11" is read because it hasn't been toggled.</p>
