Databases
StackOverflow2013
Postsdbo
POHow to show/hide multiple elements in Jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to show/hide multiple elements in Jquery
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload