user1947700 user1947700 - 2 months ago 21
CSS Question

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-expanded statement but I think this is useless since people are using data-parent="#myGroup".

Apparently data-parent="#myGroup" won't work for me for a reason.

I tried using data-parent on single element and on both buttons and collapse group and still can't make it work.

In this fiddle you can see that multiple groups can be show. I want the others to hide when I press a button.



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<p>
<button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup">
A
</button>

<button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup">
B
</button>

<button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup">
C
</button>

<button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup">
D
</button>
</p>


<div class="collapse" id="AA" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>


<div class="collapse" id="BB" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>




<div class="collapse" id="CC" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>



<div class="collapse" id="DD" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>

</body>
</html>




Answer

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>