title: Collapse multiple data targets using Bootstrap
body: <p>I have three buttons that expand/collapse three divs, using Bootstrap. However, if I click on two different buttons in succession I get two divs expanded one after the other. Is it possible that before one div is expanded all others are collapsed so that only one div at a time can be visible?</p>
  
  <p>Right now, if I had clicked on button 1 to expand Div1, I have to click on the button 1 again to collapse Div1 before I can click on button 2; otherwise contents of Div1 and Div2 both are displayed.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;div class="btn-group btn-group-justified"&gt;
      &lt;div class="col-sm-6 col-md-4 col-lg-4"&gt;
          &lt;button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1"&gt;Div1 Button&lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 col-md-4 col-lg-4"&gt;
          &lt;button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2"&gt;Div2 Button&lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 col-md-4 col-lg-4"&gt;
          &lt;button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3"&gt;Div3 Button&lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="collapse" id="Div1"&gt;Content of Div1 here &lt;/div&gt;
  &lt;div class="collapse" id="Div2"&gt;Content of Div2 here &lt;/div&gt;
  &lt;div class="collapse" id="Div3"&gt;Content of Div3 here &lt;/div&gt;
  </code></pre>