bootstrap-responsive-tabs Collapse toggling bug

Hi. This buggy behaviour applies to this demo page also, so to reproduce...

Clicking between the last two accordion links (Key Features and Source) will show correct collapse/expand toggle behaviour, but if you then click back to the first (How To), you will notice that the last one (Source) is still open, it has not collapsed.

If you play around with it you will notice this happens a lot (eg click first, then second, then back to first: second is still open).

NOTE: if you remove the .active classes from the markup, the problem is gone. You can then use:

$('#myTab a:first').tab('show'); // Select first tab

to show the first panel BUT this only works with the normal, bootstrap/desktop panel, it doesn't also trigger the first responsive accordion (should do).

PS, it would be good to have auto collapse/expand as an option. I would prefer to not use it as it causes unexpected page jumps during collapse when you use more realistic amounts of text in the panels.

Thanks

Nov 05 '15 10:11 NeilJS

This is true! I am having this problem as well. I am surprised that this has slipped by the wayside.

Dec 13 '15 05:12 cbier

+1

Dec 16 '15 00:12 dandiaczun

When this script calls collapse('show') on the item that has an active class, twitter bootstrap doesn't read the data-parent attribute from the html that was just made.

https://github.com/twbs/bootstrap/issues/16360 https://github.com/twbs/bootstrap/issues/8400

It looks like an object that specifies the parent has to be passed through with this call.. I am looking into this now.

Dec 18 '15 20:12 cbier

I have the same problem

Feb 10 '16 20:02 sky93

I solve this bug by this code:

$('.panel-collapse').on('show.bs.collapse', function (e) {
          $(e.target).closest('.panel').siblings().find('.panel-collapse').collapse('hide');
});