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

<divid="container"><divclass="panel"><p><buttonid="a"class="btn btn-primary"data-toggle="collapse"data-target="#AA"data-parent="#container">
          A
        </button><buttonid="b"class="btn btn-primary"data-toggle="collapse"data-target="#BB"data-parent="#container">
          B
        </button></p><divclass="collapse"id="AA"><divclass="card card-block">
          bla bla bla A
      </div></div><divclass="collapse"id="BB"><divclass="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.