Return to Answer

Here's how to keep at least open in both Bootstrap v3 or v4. This will only allow the open accordion to be closed only by toggling another one open.

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.

Here's how to keep at least open in both Bootstrap v3 or v4. This will only allow the open accordion to be closed only by toggling another one open.

https://www.codeply.com/go/NilPIQD9oi

/* set eq(0) to the index of the default collapsible */ $('.collapse').on('hidden.bs.collapse', function () { $('.collapse').eq(0).collapse('show'); }) 

Here's how to keep at least open in both Bootstrap v3 or v4. This will only allow the open accordion to be closed only by toggling another one open.

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 4

https://www.codeply.com/go/NilPIQD9oi

/* set eq(0) to the index of the default collapsible */ $('.collapse').on('hidden.bs.collapse', function () { $('.collapse').eq(0).collapse('show'); }) 

Bootstrap 3

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)

Updated 2018

Here's how to keep at least open in both Bootstrap v3 or v4. This will only allow the open accordion to be closed only by toggling another one open.

Bootstrap 4

https://www.codeply.com/go/NilPIQD9oi

/* set eq(0) to the index of the default collapsible */ $('.collapse').on('hidden.bs.collapse', function () { $('.collapse').eq(0).collapse('show'); }) 

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)