Bootstrap accordion toggle logic

Question

I have a bootstrap accordion and on the accordion title I have two divs. One div shows(visiable1) when Accordion is closed. and another one shows when accordion is open(visiable2). See FIDDLE

But the problem is when I open the accordion and again close the same accordion visible2 div appear instead of visible1. I am not sure what mistake I have done. My mane goal is when when accordion is closed it should display visible1 and when accordion is open should display visible2 . Any help will be much appreciated.

JS

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

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

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


 });     

Answer 1

Hook into Bootstrap panel's collapse event :

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

Answer 2

The problem you're having is that when each header is clicked, you don't know if that item has been toggled to open or to close.

Currently you are causing visiable2 to slide down anytime a header is clicked, which will make visiable2 be the one to show regardless.

One way you could solve this is to add a class to the element that is currently open, and use that as a way to determine if you should show or hide the label.