title: Bootstrap Collapse. How to expand only one div at a time
body: <p>how can I go about showing one at a time?</p>
  
  <p>Demo: <a href="http://jsfiddle.net/tvvq59wv/" rel="noreferrer">http://jsfiddle.net/tvvq59wv/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.collapser').click(function() {
    $(this).next().collapse('toggle');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;div id="myGroup"&gt;
    &lt;div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;"&gt;
      &lt;div class="col-md-4 col-xs-4"&gt;asfa asf asfasf afsf afsasf asf asf asf adf&lt;/div&gt;
      &lt;div class="col-md-4 col-xs-4"&gt;test&lt;/div&gt;
      &lt;div class="col-md-4 col-xs-4" style="text-align: right;"&gt;asf afsas afsasf asf&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="collapseExample" class="collapse" style="height: 0px;"&gt;
      &lt;div class="well"&gt;asf t1&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;"&gt;
      &lt;div class="col-md-4 col-xs-4"&gt;asfa afsasf&lt;/div&gt;
      &lt;div class="col-md-4 col-xs-4"&gt;test sd sdgs sd asf asfas afasf asfasfgd&lt;/div&gt;
      &lt;div class="col-md-4 col-xs-4" style="text-align: right;"&gt;asf afsas afsasf asf&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="collapseExample" class="collapse" style="height: 0px;"&gt;
      &lt;div class="well"&gt;asf t1&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance!</p>