<p dir="auto">There is a fiddle illustrating the problem here <a href="http://jsfiddle.net/lddubeau/kcbFY/" rel="nofollow">http://jsfiddle.net/lddubeau/kcbFY/</a></p>
<p dir="auto">(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 .)</p>
<p dir="auto">The following scenarios refer to the fiddle above.</p>
<h3 dir="auto">Scenario 1</h3>
<p dir="auto">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.</p>
<h3 dir="auto">Scenario 2</h3>
<p dir="auto">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.</p>
<h3 dir="auto">Scenario 3</h3>
<p dir="auto">If you load the fiddle and then click the "Workaround" button, panel B will expand and panel A collapse. That's the expected behavior.</p>
<h3 dir="auto">Scenario 4</h3>
<p dir="auto">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.</p>
<h3 dir="auto">Discussion</h3>
<p dir="auto">What happens in Scenario 2 is that when the <code class="notranslate">$.collapse()</code> 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 <code class="notranslate">$.collapse()</code> that there is a <code class="notranslate">data-parent</code> associated with this element.</p>
<p dir="auto">This is confirmed by scenario 4. There, the click on the "Panel B" heading triggers <code class="notranslate">click.bs.collapse.data-api</code>, which causes the collapsible element to acquire a <code class="notranslate">Collapse</code> object which is properly initialized. From that point on, it is possible to call <code class="notranslate">$.collapse()</code> on that element and get proper behavior but that's only because the user first clicked on the heading.</p>
<p dir="auto">This is also confirmed by the workaround which consists in duplicating the information already present in the HTML so that the <code class="notranslate">Collapse</code> object is created properly. There is another workaround in this fiddle: <a href="http://jsfiddle.net/lddubeau/6uzL6/" rel="nofollow">http://jsfiddle.net/lddubeau/6uzL6/</a> This fiddle contains a modified HTML where the <code class="notranslate">data-parent</code> attribute is set on both the toggles and on their targets.</p>
<p dir="auto">If the <code class="notranslate">data-parent</code> attribute were specified on the element that actually collapses rather than on the toggle (and modify <code class="notranslate">click.bs.collapse.data-api</code> to seek the <code class="notranslate">data-parent</code> information from its target) it would avoid having to duplicate the information either in the JS or in the HTML.</p>
<p dir="auto">It seems there is something funky happening when compiling the the less files to plain old css. While porting 3.0.0-wip to Sass I noticed duplicate rules in the bootstrap.css generated by recess:</p>
<p dir="auto">A good example is in lines <a href="https://github.com/twitter/bootstrap/blob/3.0.0-wip/dist/css/bootstrap.css#L587">587 to 605</a> of bootstrap.css. The rules for .dl-horizontal dd:before and .dl-horizontal dd:after are duplicated, it seems it has something to do with the clearfix mixin. It happens to all classes making use of clearfix(). I couldn't reproduce the error when extracting the mixin and classes into a smaller testfile.</p>