jQuery expandable menu
<pre><code>&lt;div id="firstDiv"&gt;
    &lt;div id="secondDiv"&gt;
        &lt;ul id="accordionMenu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;menu item&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;menu item&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;suboption 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;suboption 2&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;menu item&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;menu item&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;menu item&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>How to make it expandable?</p>

<p>I have the following JavaScript code:</p>

<pre><code>$(document).ready(function() {
    // Collapse everything but the first menu:
    $("#accordionMenu &gt; li &gt; a").not(":first").find("+ ul").slideUp(1);
    // Expand or collapse:
    $("#accordionMenu &gt; li &gt; a").click(function() {
        $(this).find("+ ul").slideToggle("fast");
    });
});
</code></pre>
