How to show/hide multiple elements in Jquery
<p>I am currently creating a type of menu that will contain sub-menus, when a menu item is selected the sub-menu for that particular menu item will appear and any other open sub-menu will be closed. </p>

<p>Each of the menu lists is displayed inline so that they sit next to each other with 3 in a line, the sub-menu will then appear directly underneath spanning the whole width of the page and push the rest of the menu down the page.</p>

<p>I am having trouble making it so that when Item 1 is pressed only sub-menu 1 shows, and so on. Currently when any item is pressed, sub-menu 1 will be shown. </p>

<p>Below is the html...</p>

<pre><code>&lt;ul id="menu"&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="sub-menu 1"&gt;
    &lt;ul&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="sub-menu 2"&gt;
        &lt;ul&gt;
            &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="sub-menu 3"&gt;
    &lt;ul&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;   




&lt;ul id="menu"&gt;
    &lt;li&gt;Item 4&lt;/li&gt;
    &lt;li&gt;Item 5&lt;/li&gt;
    &lt;li&gt;Item 6&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="sub-menu 4"&gt;
    &lt;ul&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="sub-menu 5"&gt;
    &lt;ul&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="sub-menu 6"&gt;
    &lt;ul&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
        &lt;li&gt;Sub-menu item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Below is the jquery</p>

<pre><code>$(document).ready(function(){
    $("#menu &gt; li").toggle(
    function(){

             $("#buying-guide-homepage &gt; li").animate({height:109},"slow");
             $(".sub-menu 1").slideDown("slow");

        },
        function(){

        $(".sub-menu 1").slideUp("slow");
        $("#buying-guide-homepage &gt; li").animate({height:89},"slow");

        });
 });
</code></pre>
