Databases
StackOverflow2013
Postsdbo
POJQuery hide ULs and only expand once particular class set (bit like an accordion)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery hide ULs and only expand once particular class set (bit like an accordion)
    text
    copied!<p>Right folks,</p> <p>After battling with a JQuery Accordion trying to do what I want I think hiding all secondary UL's and only expanding them once a class my CMS sets automatically on lis would be the easiest thing. I want to have accordion type functionality, but it must expand/slide down when that particular ul is active. I have realized that a typical JQuery accordion will not suit, as I will not have toggle li's present in the CMS menu output.</p> <p>Menu code here:</p> <pre><code>&lt;ul id="amenu"&gt; &lt;li&gt;&lt;a href="anotherpage.html"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;span class="currentbranch0"&gt; &lt;a href="anotherpage2.html"&gt;Content&lt;/a&gt;&lt;/span&gt; &lt;ul class="multilevel-linkul-0" title=""&gt; &lt;li&gt;&lt;a href="subpage.html"&gt;Content 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;span class="currentbranch1"&gt;&lt;a href="subpage.html"&gt;Content 3&lt;/a&gt;&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre> <p></p> <pre><code>//How to target this command to multilevel-linkul-0 class? $(function(){ $('ul li ul').slideDown(); }); </code></pre> <p>(Fiddle: <a href="http://jsfiddle.net/Dmhcq/5/" rel="nofollow">http://jsfiddle.net/Dmhcq/5/</a>)</p> <p>-- Updated Fiddle to show exactly what I mean, I only want the secondary UL with currentbranch1 to slideDown</p> <p>With this code, basically anything with span class "currentbranch1" should slideDown and the rest should remain hidden. I have been looking at sample JQuery code and am completely at a loss even where to start, I'm not a JS programmer :) . So unfortunately above is my best stab at it. If anyone has any advice it would be much appreciated. :)</p> <p>Cheers</p> <p>Nick</p>
 

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