using $.collapse() together with the data API requires duplicating information

[lddubeau]

There is a fiddle illustrating the problem here http://jsfiddle.net/lddubeau/kcbFY/

(It imports 3.0.0 RC2 rather than what is on the wip branch. I tried to get the fiddle to get the latest from github but jsfiddle complained. Visual inspection of the files on the wip branch tells me the issue has not disappeared since 3.0.0 RC2 .)

The following scenarios refer to the fiddle above.

Scenario 1

If you load the fiddle and click on the panel headers and don't touch the two buttons at the bottom, when expanding one panel, the other collapses. This is the expected behavior.

Scenario 2

However, if you load the fiddle and then click the "Trigger it programmatically" button. Panel B will expand without panel A collapsing. The expected behavior would be for panel A to collapse as panel B expands.

Scenario 3

If you load the fiddle and then click the "Workaround" button, panel B will expand and panel A collapse. That's the expected behavior.

Scenario 4

Load the fiddle. Click on "Panel B". Works fine. Then click on "Panel A" so that panel A is expanded and panel B collapsed. Then, hit "Trigger it programmatically". It works as expected: panel A collapses, panel B expands.

Discussion

What happens in Scenario 2 is that when the $.collapse() function is called, the element appears to be some random collapsible element not part of a group of panels that should be coordinated together. There is no information on the element itself to tell $.collapse() that there is a data-parent associated with this element.

This is confirmed by scenario 4. There, the click on the "Panel B" heading triggers click.bs.collapse.data-api, which causes the collapsible element to acquire a Collapse object which is properly initialized. From that point on, it is possible to call $.collapse() on that element and get proper behavior but that's only because the user first clicked on the heading.

This is also confirmed by the workaround which consists in duplicating the information already present in the HTML so that the Collapse object is created properly. There is another workaround in this fiddle: http://jsfiddle.net/lddubeau/6uzL6/ This fiddle contains a modified HTML where the data-parent attribute is set on both the toggles and on their targets.

If the data-parent attribute were specified on the element that actually collapses rather than on the toggle (and modify click.bs.collapse.data-api to seek the data-parent information from its target) it would avoid having to duplicate the information either in the JS or in the HTML.

[cvrebert]

Use BootstrapCDN instead of trying to hotlink to GitHub. (Also v3.0.0 final is out!)

[lddubeau]

I've updated both fiddles to use 3.0.0. The issue reported remains the same.

[fat]

that's because there is special accordion logic which i begrudgingly hacked in there. If you really want that behavior though it's easy…

instead of

$("#sb-errors-collapse").collapse('show');

trigger a click event

$("a[href=#sb-errors-collapse]").click()

hope that helps!

[fat]

also, hopefully this goes without saying – you shouldn't actually use that selector i wrote (that's just to make his jsfiddle work)… give the anchor target a proper class or id.