Collapsible Buttons - Bootstrap 3.3.4

问题

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>

回答1:

Post from: ambs on duplicate question: CSS Collapsible groups - Bootstrap

 
 <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>
<body>
<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>
</body>

来源：https://stackoverflow.com/questions/39932478/collapsible-buttons-bootstrap-3-3-4

标签

javascript

css

twitter-bootstrap-3