Show/hide jQuery

Question

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?

Answer 1

Check this code:

$('ul li').live('click', function () {
  $(this).closest('ul').toggle();
});

I want to advise you to add some class to first tier "ul" elements, because the code above will set click handlers also at the second tier "li"'s.

Answer 2

I don't think you need the hide class. You can use the show() and hide() JQuery functions, or toggle().

If I am wrong and you really do need your hide class, you can use addClass() and removeClass() functions.

Answer 3

First you need to fix your markup by moving your child <ul> inside the <li> so it's valid (a <ul> cannot be a direct child of a <ul>). After that, there's no need for the hide classes, you can just hide all of them, with CSS like this:

ul li ul { display: none; }

Then you can use jQuery to do what you want, like this:

$('ul li span a').live('click', function () {
  $(this).closest('li').siblings('li').find(".tier_2").slideUp();
  $(this).closest('li').children('ul').slideToggle();
});​

This allows showing one at a time as well as collapsing the last one open if you want, change the last call to .slideDown() instead of .slideToggle() if you don't want it collapsible.

You can see a working demo here