Twitter Bootstrap Collapse - Problems with Firefox >= 15

Question

Example with 2 Toggle-Buttons and 2 Global-Buttons [Show all] and [Hide all]

Chrome works fine FF >= 15 has problems: click 2 x on [hide all] - Game Over - no more collapse!

Visit: http://jsfiddle.net/feldversuch/fB5PJ/8/

<div id="content" class="span8">
    <button type="button" class="btn" data-toggle="collapse" data-target="#demo1">
        toggle #demo1</button>
    <button type="button" class="btn" data-toggle="collapse" data-target="#demo2">
        toggle #demo2</button>
    <button type="button" class="btn btn-danger" onclick="$('.collapse').collapse('show');return false;">
        show all</button>
    <button type="button" class="btn btn-danger" onclick="$('.collapse').collapse('hide');return false;">
        hide all</button>
    <br/><br/>
    
<div id="collapser"> 

<div id="demo1" class="btn collapse in"> <span class="badge">#demo1</span> 
    Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, initially shown </div>

<br/><br/>

<div id="demo2" class="btn collapse in"> <span class="badge">#demo2</span> 
    Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, initially shown </div>

</div>
</div>

Solution by merv : show only $('.collapse').not('.in')

<button type="button" class="btn btn-danger" onclick="$('.collapse').not('.in').collapse('show');return false;">
   Show All</button>

Solution by me : hide only $('.collapse.in')

<button type="button" class="btn btn-danger" onclick="$('.collapse.in').collapse('hide');return false;">
        hide all</button>

Answer 1

This is a Bootstrap bug. The Bootstrap Collapse plugin lacks any short-circuit code to prevent the hide or show method from getting executed twice. This makes it possible for the plugin to get trapped in the transitioning state. Different browsers handle it differently. The only reason it works in Chrome is because it is still triggering its $.support.transition.end event when the in class is removed (even if the in class was already gone!).

Someone had proposed having the plugin prevent unnecessary calls, but the pull failed due to sloppy git etiquette (see Prevent collapse from getting stuck in transition state by calling show/hide when already shown/hidden). I'm not opposed to such an approach in terms of preventing these problems from the library side, but personally I believe a broader approach is necessary, since minor state freeze issues like this come up in almost all the Bootstrap plugins which use CSS Transitions. Until something like that gets pulled into the codebase, you'll just have to be careful about such issues.

For now, a simple workaround would be to do your own error catching and prevent hide and show from being called twice. The easiest way to do this in your example is to use more specific selectors in your Show All and Hide All button click callbacks. Namely,

<button type="button" class="btn btn-danger"
   onclick="$('.collapse').not('.in').collapse('show');return false;">
   Show All
</button>
<button type="button" class="btn btn-danger" 
   onclick="$('.collapse.in').collapse('hide');return false;">
   Hide All
</button>

Plunker