title: Bootstrap Collapse - Expand All
body: <p>I've implemented Bootstrap 3 Collapse. The client wants all of the target blocks to expand when any one of the heading links is clicked. I have tried to implement a modified version of <a href="https://stackoverflow.com/questions/18689845/show-all-bootstrap-accordion">this answer</a>, but can't get it working. </p>
  
  <p>How can I get all target blocks to expand/collapse when any one of them is clicked?</p>
  
  <p>This is the markup:</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h6 class="panel-title"&gt;&lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse{entry_id}"&gt;{title}&lt;/a&gt;&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapse{entry_id}" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          {technology_body}
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the JS I have attempted:</p>
  
  <pre><code>$('#accordion').on('click', function() {
      if($('.collapse:not(.in)')) {
           $.collapse("toggle");
      }
  });
  </code></pre>