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?
