Закрыть аккордеон с помощью jQuery?

Question

У меня есть этот простой код, который показывает 3 пунктов

При нажатии на заголовке ($(".fileHeader")), он должен открыть, то следующий элемент, который является следующим элементом (скрытые дела) ($(".LST_Documents"))

эскиза:

JSBIN : it does work.

Самое главное:

Когда я нажимаю на $(".fileHeader") - мне нужно, чтобы закрыть все другие$(".LST_Documents") и затем (вот почему я использовал promise) открыть соответствующий $(".LST_Documents").

Проблема (посмотрите на рис.), Если я снова нажму на первый $(".fileHeader"). что происходит, это закрытие, а затем повторное открытие. и Я хочу, чтобы он остался ЗАКРЫТО.

P.S.

Я мог бы решить его с помощью класса (.rowOpen или что-то в этом роде), но я хочу сделать это только через JS/JQ.

Как я могу улучшить свой код для работы, как ожидалось?

Answer 1

Перед тем, как сдвинуть его, просто удерживайте содержимое видимости заголовка. И соскабливайте содержимое только тогда, когда оно не было видно.

Адрес fiddle.

$(".fileHeader").on('click', function() { 
    var content$ = $(this).next(), 
     isContentVisible = content$.is(':visible'); 

    $(".LST_Documents:visible").slideUp().promise().done(function() { 
     if (! isContentVisible) { 
      content$.slideDown(); 
     } 
    }); 

}); 

Answer 2

Как насчет простого условия:

$(".fileheader").on('click', function() {  
    var next = $(this).next(); 
    if(next.is(':visible')) 
    { 
     next.slideUp(); 
    } 
    else 
    { 
     $(".LST_Documents:visible").slideUp().promise().done(function() { 
       next.slideDown(); 
     }); 
    } 
});