CSS Collapsible Groups - Bootstrap

I'm using bootstrap collapsible button group. I want only one single group box to be visible at a time. I made a function in js to remove the 'in' class and to change the aria-expa

Solution 1:

This will work.

http://plnkr.co/edit/HlrIvDW71JSVemkbhejy?p=preview

<div id="container">
  <div class="panel">
    <p>
        <button id="a" class="btn btn-primary" data-toggle="collapse" data-target="#AA" data-parent="#container">
          A
        </button>
        <button id="b" class="btn btn-primary" data-toggle="collapse" data-target="#BB" data-parent="#container">
          B
        </button>
    </p>

    <div class="collapse" id="AA">
      <div class="card card-block">
          bla bla bla A
      </div>
    </div>

    <div class="collapse" id="BB">
      <div class="card card-block">
         bla bla bla B
      </div>
    </div>
  </div>
</div>

Solution 2:

This is not what you want. Bootstrap does not have this option.

You have 3 options:

1. Use Accordion from Bootstrap -> http://getbootstrap.com/javascript/#collapse
2. Use Tabs from Bootstrap -> http://getbootstrap.com/javascript/#tabs (This is the best one if you don't want to program. You just need to change the tabs styles like buttons.)
3. Program it by yourself.