Databases
StackOverflow2013
Postsdbo
POSimple show/hide jQuery troubles
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimple show/hide jQuery troubles
    text
    copied!<p>Okay, I feel like a bit of a 800 pound gorilla trying to thread a needle when it comes to jQuery. I need a script that will preform a simple show/hide (preferably with a nice sliding in and out) on a list.</p> <p>My markup looks like this:</p> <pre><code> &lt;div id="themes"&gt; &lt;h2&gt;Research Themes&lt;/h2&gt; &lt;ul&gt; &lt;li class="tier_1"&gt;&lt;a href=""&gt;Learn about our approach to the &lt;strong&gt;environment&lt;/strong&gt;&lt;/a&gt; &lt;ul class="tier_2 hide"&gt; &lt;li&gt;&lt;a href=""&gt;&lt;em&gt;How we are tying this all together&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;&lt;strong&gt;Project:&lt;/strong&gt; Solor Powered Biofactories&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;&lt;strong&gt;Project:&lt;/strong&gt; Cleaning Water with Nature&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;&lt;strong&gt;Project:&lt;/strong&gt; Higher Efficiency Solar Technology&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="tier_1"&gt;&lt;a href=""&gt;Learn about our approach to &lt;strong&gt;human health&lt;/strong&gt;&lt;/a&gt; &lt;ul class="tier_2 hide"&gt; &lt;li&gt;&lt;a href=""&gt;Project name numero uno goes here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Project name numero dos goes here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Project name numero tres goes here&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="tier_1"&gt;&lt;a href=""&gt;Learn about our approach to &lt;strong&gt;national defense&lt;/strong&gt;&lt;/a&gt; &lt;ul class="tier_2 hide"&gt; &lt;li&gt;&lt;a href=""&gt;Project name numero uno goes here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Project name numero dos goes here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Project name numero tres goes here&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- // end themes --&gt; </code></pre> <p>You can see that each nested ul has a class of "tier_2" and "hide". Ideally when the li they are nested within ("li.tier_1") is clicked it's child ul will have the hide class removed and the li's contained within will slideout, but at the same time should check all the other ul.tier_2's and be sure they get a hide class--so only one theme can be expanded at a time.</p> <p>I set up a sandbox to try some things: <a href="http://jsbin.com/odete/3" rel="nofollow noreferrer">http://jsbin.com/odete/3</a></p> <p>My JS looks like this: </p> <pre><code>$(function(){ $(".tier_1 a").each(function(i,o){ $(this).click(function(e){ e.preventDefault(); $(this).addClass("show").siblings("ul").removeClass("show"); $("ul.tier_2:eq("+i+")").show().siblings("ul.tier_2").hide(); }); }); }); </code></pre> <p>Totally a dumb way to do this, I am sure. But I based it off another script and it does work "a little bit" as you can see in the sandbox.</p> <p>If one of you mean hands at jQuery might be so inclined to take a peek I'd be very grateful. If you could also advise on how to have the transitions slideIn and Out that would also be fantastic! </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