Bootstrap 3 collapse can have multiple panels open after programmatically opening a panel
html, javascript, twitter-bootstrap, twitter-bootstrap-3
Solution
You can create a handler for the collapse `show` event which occurs just before any panels are displayed.
Add this to ensure any other open panels are closed before the selected one is shown:
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
Bootply demo
You can read more about the `collapse` events here: http://getbootstrap.com/javascript/#collapse
Problem
I have a problem with bootstrap 3 collapse, after opening a panel programmatically it is possible to keep another panel open while reopening the first panel. My HTML: ``` <button type="button" class="btn showpanel">Show panel 3</button> <button type="button" class="btn hidepanel">Hide panel 3</button> <button type="button" class="btn openpanel">Open panel 3</button> <button type="button" class="btn closepanel">Close panel 3</button> <hr/> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a> </h4> </div> <div id="panel1" class="panel-collapse collapse"> <div class="panel-body"> Contents panel 1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a> </h4> </div> <div id="panel2" class="panel-collapse collapse"> <div class="panel-body"> Contents panel 2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a> </h4> </div> <div id="panel3" class="panel-collapse collapse"> <div class="panel-body"> Contents panel 3 </div> </div> </div> </div> ``` And some JavaScript: ``` $(".hidepanel").on("click", function() { $("#panel3").parent().hide(); }); $(".showpanel").on("click", function() { $("#panel3").parent().show(); }); $(".openpanel").on("click", function() { $("#panel3").collapse('show'); }); $(".closepanel").on("click", function() { $("#panel3").collapse('hide'); }); ``` My jsfiddle that demonstrates this issue To reproduce: - Click the button 'Open panel 3'. - Click 'Panel 2' to open it. So far no problems. - Click 'Panel 3' to open it again. Panel 2 remains open! So opening a panel programmatically seems to mess up bootstraps internal registration about panel states? I don't see anything visibly wrong with the 'state change' of the third panel (it's class changes from 'collapse' to 'in' and back as you would expect).