jQuery: how do I make a collapsable tree nav?
<p>I have headers, and each of those headers has sub items.
When I click a header, I want it to toggle viewing or showing the headers contents:</p>

<p>This is what I have so far: </p>

<pre><code>$j('h2').click(function() {
if ($j(this).next().is(":hidden")) {
    $j(this).next().show();
} else {
    $j(this).next().hide();
}
});
</code></pre>

<p>And my HTML look like this:</p>

<pre><code>&lt;ul class="submenu"&gt;
            &lt;li class="section"&gt;&lt;h2&gt;Section One&lt;/h2&gt;
                &lt;ul&gt;

                    &lt;li&gt;text&lt;/li&gt;


                    &lt;li&gt;text&lt;/li&gt;
&lt;li&gt;text&lt;/li&gt;

                &lt;/ul&gt;
            &lt;/li&gt;

            &lt;li class="section"&gt;&lt;h2&gt;Section Two&lt;/h2&gt;
                &lt;ul style="display: none; overflow-x: visible; overflow-y: visible; "&gt;
&lt;li style=""&gt;
                            text&lt;/li&gt;&lt;li&gt;
                            text&lt;/li&gt;&lt;li&gt;
                            text&lt;/li&gt;&lt;/ul&gt;
                &lt;/li&gt;

        &lt;/ul&gt;
</code></pre>
