Бутстреп-аккордеон toggle logic

Question

У меня есть саундтрек и на аккордеоне. У меня есть два div. Один div показывает (visiable1), когда Аккордеон закрыт. а другой показывает, когда аккордеон открыт (видимый2). См. FIDDLE

Но проблема в том, что я открываю аккордеон и снова закрываю тот же аккордеон visible2 div вместо видимого1. Я не знаю, какую ошибку я совершил. Моя цель гривы - когда аккордеон закрывается, он должен отображать visible1, а когда аккордеон открыт, должен отображаться visible2. Любая помощь будет высоко оценена.

JS

$('body').on('click', '.list-bar', function() { 

    $(".visiable1").slideDown("fast"); 
    $(".visiable2").slideUp("fast"); 

    $(this).children(".visiable1").slideUp(); 
    $(this).children(".visiable2").slideDown(); 


});  

Answer 1

крюк в Bootstrap panel's collapse event:

$(document).on('hidden.bs.collapse shown.bs.collapse', '.panel', function() { 
    $(this).find('.visiable1, .visiable2').slideToggle('fast'); 
}); 

Answer 2

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

В настоящее время вы вызываете visiable2, чтобы скользить вниз в любое время, когда щелкнул заголовок, что сделает видимым2 тот, который будет отображаться независимо.

Один из способов решения этой проблемы - добавить класс к открываемому элементу и использовать его как способ определить, следует ли показывать или скрыть метку.