Hide all previously toggled elements

Question

I have a sidebar menu that opens and closes hidden parts of the page through jQuery. The link both fades the hidden content and also adds and removes a class to the link. So for example the html / css

<ul>
<li><a class="linkOne" href="#">Link One</a></li>
<li><a class="linkTwo" href="#">Link Two</a></li>
</ul>

<div class="linkOneBox">Stuff</div>
<div class="linkTwoBox">Stuff</div>

<style type="text/css">
.linkOneBox,.linkTwoBox {display:none}
.current {background: #fff}
</style>

and the jQuery something like..

$('.linkOne').click(function() {
    $('.linkOneBox').fadeToggle();
    $(this).toggleClass('current'); 
    return false; 
    });

Anyways.. my question is, since i am using toggle, what is the best way to have all of the other toggles that were left open reset to off? How would I have it so that clicking a new link also hides all of the previously opened windows and removes the .current ?

Answer 1

I'd make a few changes to the HTML first:

<ul id="menu">
    <li><a href="#b1">Link One</a></li>
    <li><a href="#b2">Link Two</a></li>
</ul>

<div class="box" id="b2">Stuff</div>
<div class="box" id="b1">Stuff</div>

Then:

$(document).ready(function(){

    // Initially hide the boxes
    $('.box').hide();

    $('#menu a').click(function(){

     $('#menu a').removeClass(); // Remove 'current' class from any links
     $('.box:visible').fadeToggle(); // Hide all previously visible boxes

     // Fade in the box where the id is the same as the href of the clicked link
     $($(this).attr('href')).fadeToggle(); 
     $(this).addClass('current'); // And highlight the menu link

     return false; 
    });

});

There is a bit of an overlap, so instead you might want to just hide() the open boxes before you fade the new one in.

Answer 2

I agree with Mark, but use:

$(this).addClass('current');

Since toggleClass checks first if the class exists.