bootstrap collapse visible only one at a time

Question

I am using bootstrap collapse that will show when click on the related button. the problem is this collapse does not work mutually. I want that only one collapse will be shown at a time and hide all others.

although the Accordion example is available it will not work on buttons. I am a newbie in bootstrap maybe I am doing in the wrong way.

this is my jsfiddle

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExampleTwo" aria-expanded="false" aria-controls="collapseExampleTwo"> Button with data-target </button> <div class="collapse" id="collapseExampleTwo"> <div class="well"> <div><p>2nd div</p></div> </div> </div>

how I show collapse only one at a time.

for your requirement go with Accordion, and style your accordion tabs accordingly. — stanze
– stanze, Commented Apr 8, 2015 at 10:26

Alex Salauyou · Accepted Answer · 2015-04-08 10:55:42Z

3

Try this:

$('.btn-primary').on('click',function(){$('.collapse').collapse('hide');})

edited Apr 8, 2015 at 10:55

Alex Salauyou

14.4k5 gold badges48 silver badges70 bronze badges

answered Apr 8, 2015 at 10:34

Mohamadjavad Vakili

3,4481 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

bootstrap collapse visible only one at a time

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related