title: Bootstrap: Using panel heading to collapse panel body
body: <p>I have a Bootstrap v3 Panel with a panel-heading and panel-body. I want a user to be able to click on the panel-heading and it will collapse/expand the panel-body. I am using Bootstrap's Collapse javascript to do this. Here is my markup:</p>
  
  <pre><code>&lt;div class="panel panel-default group-panel"&gt;
    &lt;div class="panel-heading" role="button" data-toggle="collapse" data-target="#panel-body-foobar"&gt;
      &lt;a href="#" class="btn btn-xs"&gt;Action Button&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="panel-body collapse in" id="panel-body-foobar"&gt;
      Some content here. 
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code works fine, clicking on the panel heading will collapse/expand the body. However, notice that I also have a button inside the panel heading. When I click that button, it is collapsing/expanding the panel body. See this <a href="https://jsfiddle.net/mwxea7qn/" rel="nofollow">jsfiddle</a> if you don't know what I mean. </p>
  
  <p>How can I configure this so that only clicking directly on the panel heading, not any child elements, will trigger the collapsing/expanding? </p>