Faites basculer la visibilité d'un élément avec jQuery !

Question

J'ai le balisage suivant :

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

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

et le jQuery suivant :

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

Lorsque la zone cachée est révélée, je veux cacher l'autre zone cachée si elle est visible ? Je veux faire en sorte que je puisse ajouter d'autres en-têtes et zones cachées si j'en ai besoin.

Mise à jour :

Merci les gars, j'ai fini par faire ça :

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

Answer 1

En supposant que vous ayez une hiddenArea visible lorsque le formulaire est rendu, cela fonctionnera. Notez également que vous n'avez pas besoin du filtre à l'intérieur de la méthode next, car next ne vous donne que le prochain membre de la famille.

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

Answer 2

Merci les gars, j'ai fini par faire ça :

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