Javascript 自举手风琴切换逻辑

我有一个自助式手风琴，在手风琴的标题上我有两个div。手风琴关闭时显示一个div（可视1）。另一个在手风琴打开时显示（visiable2）。请参见

但问题是，当我打开手风琴并再次关闭同一个手风琴时，visible2 div出现而不是visible1。我不确定我犯了什么错误。我的目标是当手风琴关闭时，它应该显示visible1，当手风琴打开时，它应该显示visible2。 任何帮助都将不胜感激

JS

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

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

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


 });     

钩入：

---

您遇到的问题是，单击每个标题时，您不知道该项目是否已切换为打开或关闭

当前，您正在使visiable2在单击标题时向下滑动，这将使visiable2成为要显示的标题

---

解决此问题的一种方法是向当前打开的元素添加一个类，并使用该类来确定是否应显示或隐藏标签。

非常感谢您为我找到此项。这是肯定的事。为其他人将其标记为“已接受”。

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