title: Twitter Bootstrap multiple accordions but only one open panel at a time
body: <p>I have 3 Twitter Bootstrap accordions on my page, each one set up like this:</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion1"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1"&gt;
               &lt;h4 class="panel-title"&gt;Collapsible Group Item #1&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne1" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1"&gt;
               &lt;h4 class="panel-title"&gt;Collapsible Group Item #2&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseTwo1" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1"&gt;
               &lt;h4 class="panel-title"&gt;Collapsible Group Item #3&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseThree1" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>id</code>'s of the accordions are like the one displayed above, so <code>#accordion1</code>, <code>#accordion2</code> and <code>#accordion3</code>. The same counts for the panels per accordion.</p>
  
  <p>How can I alter this set up so that only one panel can be open at a time? At the moment, one panel <em>per accordion</em> can be open at a time, which is not my desired behaviour. </p>
  
  <p><strong>DEMO: <a href="http://jsfiddle.net/Dreamonic/yd4mbhtc/">JSFiddle</a></strong></p>