Toggle element visibility with jQuery!

Question

I have the following markup:

<div class="header">Text</div>
<div class="hiddenArea">sdsada</div>

<div class="header">Text2</div>
<div class="hiddenArea">sdsada</div>

and the following jQuery:

$('.header').click(function() {
        var t = $(this).next('.hiddenArea').slideToggle();
    });

When the hiddenArea is revealed I want to hide the other hiddenArea if it is visible? I want to make this so that I can add other headers and hiddenAreas if I need them.

Update:

Thanks Guys, ended up doing this:

$('#messages .header').click(function() {
  if (!$(this).next().is(':visible')) {
    $('.hiddenArea').slideToggle();
  }
});

Answer 1

Assuming you have one hiddenArea visible when the form is rendered this will work. Also note you dont need the filter inside the next method as next only ever gives you the next sibling.

$('.header').click(function() {
    var $el = $(this);
    if ( ! $el.next().is('visible') ){
       $('div.hiddenArea:visible').slideUp( function(){
           var t = $el.next().slideDown();
       });
    }
});

Answer 2

Thanks Guys, ended up doing this:

$('#messages .header').click(function() {
        if (!$(this).next().is(':visible')) {
            $('.hiddenArea').slideToggle();
        }
    });