openam / bootstrap-responsive-tabs

Bootstrap responsive tabs are tabs that switch to collapsible components (accordions) when resized.
openam.github.io/bootstrap-responsive-tabs
MIT License
132 stars 60 forks source link

Collapse toggling bug #45

Open NeilJS opened 8 years ago

NeilJS commented 8 years ago

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

cbier commented 8 years ago

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

dandiaczun commented 8 years ago

+1

cbier commented 8 years ago

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.

sky93 commented 8 years ago

I have the same problem

mhascak commented 8 years ago

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');
});
netAction commented 8 years ago

Same issue here. +1

Klainer's workaround is ok.

equiman commented 8 years ago

I try fix it with @Klainer and I clicked other tab the tab, but they collapse all the tab and don't show clicked tab.

I'll try to debug it, but it's making some kind of endless loop.

ACPrice commented 7 years ago

Same issue here, and trying Klainer's fix gave me the infinite loop mentioned by equiman

Nepal99 commented 6 years ago

Is there any updated fix for this issue..!