Arium Rana
Arium Rana

Reputation: 29

bootstrap collapse visible only one at a time

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.

Upvotes: 1

Views: 4029

Answers (1)

Mohamadjavad Vakili
Mohamadjavad Vakili

Reputation: 3348

Try this:

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

Upvotes: 3

Related Questions