Bootstrap Collapse. How to expand only one div at a time. HTML attributes

http://stackoverflow.com/questions/37753407/

by Gleb Kemarsky

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myGroup" class="container">
  <div class="panel">

    <div class="row mint" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseOne" class="row collapse">
      <div class="text mint">text</div>
    </div>

    <div class="row mauve" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseTwo" class="row collapse">
     <div class="text mauve">text</div>
    </div>
    
    <div class="row peach" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseThree" class="row collapse">
      <div class="text peach">text</div>
    </div>
    
  </div>
</div>

CSS

.panel {
  border: 0;
  margin-bottom: 0;
}

.text {
  margin-bottom: 20px;
  padding: 15px;
}

.mauve { background: #c9f }
.mint  { background: #9fc }
.peach { background: #fc9 }

.text.mauve { background: #edf }
.text.mint  { background: #dfe }
.text.peach { background: #fed }