Updated 2018
Here's how to keep at least open in both Bootstrap v3 or v4. This means that the open accordion can only be closed by toggling another one open.
Bootstrap 4
https://www.codeply.com/go/bbCcnl0jBB
// the current open accordion will not be able to close itself
$('[data-toggle="collapse"]').on('click',function(e){
if ( $(this).parents('.accordion').find('.collapse.show') ){
var idx = $(this).index('[data-toggle="collapse"]');
if (idx == $('.collapse.show').index('.collapse')) {
e.stopPropagation();
}
}
});
Also, see this answer which shows how to specify a "default" accordion that will open when all others are closed.
Bootstrap 3
$('[data-toggle="collapse"]').on('click',function(e){
if($(this).parents('.panel').find('.collapse').hasClass('in')){
var idx = $(this).index('[data-toggle="collapse"]');
var idxShown = $('.collapse.in').index('.accordion-body');
if (idx==idxShown) {
e.stopPropagation();
}
}
});
https://www.codeply.com/go/yLw944BrgA
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>
(Note: the panel
class is needed in Bootstrap 3 to make the accordion behavior work)