Переключить видимость элемента с jQuery!

Question

У меня есть следующая разметка:

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

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

и следующий jQuery:

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

Когда скрытая область обнаружена, я хочу скрыть другую скрытую область, если она видна? Я хочу сделать это так, чтобы я мог добавлять другие заголовки и скрытые области, если они мне нужны.

Обновление:

Спасибо, ребята, в итоге сделали это:

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

Answer 1

Если у вас есть одна скрытая область, видимая при визуализации формы, это будет работать. Также обратите внимание, что вам не нужен фильтр внутри следующего метода, так как следующий только когда-либо дает вам следующий брат.

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

Answer 2

Спасибо, ребята, все закончилось так:

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