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

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="row mint toggle">
    <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 class="row collapse">
    <div class="text mint">text</div>
  </div>

  <div class="row mauve toggle">
    <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 class="row collapse">
    <div class="text mauve">text</div>
  </div>

  <div class="row peach toggle">
    <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 class="row collapse">
    <div class="text peach">text</div>
  </div>

</div>

CSS

.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 }

JavaScript

$('.toggle').click(function() {
  if ( !$(this).next().hasClass('in') ) {
    $(this).parent().children('.collapse.in').collapse('hide');
  }
  $(this).next().collapse('toggle');
});