Show/hide jQuery
- by Banderdash
Not much experience with JavaScript, hopefully one of you gurus can help.
<div id="themes">
<h2>Research Themes</h2>
<ul>
<li><a href="">Learn about our approach to the <strong>environment</strong></a><span><a href="#">Expand</a></span></li>
<ul class="tier_2 hide">
<li><a href="">Project name numero uno goes here</a></li>
<li><a href="">Project name numero dos goes here</a></li>
<li><a href="">Project name numero tres goes here</a></li>
</ul>
<li><a href="">Learn about our approach to <strong>human health</strong></a><span><a href="#">Expand</a></span></li>
<ul class="tier_2 hide">
<li><a href="">Project name numero uno goes here</a></li>
<li><a href="">Project name numero dos goes here</a></li>
<li><a href="">Project name numero tres goes here</a></li>
</ul>
<li class="last"><a href="">Learn about our approach to <strong>national defense</strong></a><span><a href="#">Expand</a></span></li>
<ul class="tier_2 hide">
<li><a href="">Project name numero uno goes here</a></li>
<li><a href="">Project name numero dos goes here</a></li>
<li><a href="">Project name numero tres goes here</a></li>
</ul>
</ul>
</div><!-- // end themes -->
This is my markup. As you can see under each of the first tier of li's there are ul's with classes of tier_2 and hide. I've been trying to create some simple jQuery that on click will remove the hide class from it's child ul, but at the same time check that no other ul's with class of tier_2 are shown (aka the other's have the hide class). This should keep a visitor from expanding so many items at once that it will make the layout look funky.
Just not sure how to accomplish this, any ideas?
