Example One Body
Example Two Body
Example Three Body
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<div class="panel panel-warning">
<div class="panel-heading" id="heading1" role="tab">
<h3 class="panel-title"><a aria-controls="example1" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example1" role="button">Example One Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
</div>
<div aria-labelledby="heading1" class="panel-collapse collapse in" id="example1" role="tabpanel">
<div class="panel-body">
<p>Example One Body</p>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading" id="heading2" role="tab">
<h3 class="panel-title"><a aria-controls="example2" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example2" role="button">Example Two Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
</div>
<div aria-labelledby="heading2" class="panel-collapse collapse" id="example2" role="tabpanel">
<div class="panel-body">
<p>Example Two Body</p>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading" id="heading3" role="tab">
<h3 class="panel-title"><a aria-controls="example3" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example3" role="button">Example Three Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
</div>
<div aria-labelledby="heading3" class="panel-collapse collapse" id="example3" role="tabpanel">
<div class="panel-body">
<p>Example Three Body</p>
</div>
</div>
</div>
</div>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<div class="panel panel-warning">
<div class="panel-heading" id="heading1" role="tab">
<h3 class="panel-title"><a aria-controls="example1" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example1" role="button">Example One Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
</div>
<div aria-labelledby="heading1" class="panel-collapse collapse in" id="example1" role="tabpanel">
<div class="panel-body">
<p>Example One Body</p>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading" id="heading2" role="tab">
<h3 class="panel-title"><a aria-controls="example2" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example2" role="button">Example Two Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
</div>
<div aria-labelledby="heading2" class="panel-collapse collapse" id="example2" role="tabpanel">
<div class="panel-body">
<p>Example Two Body</p>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading" id="heading3" role="tab">
<h3 class="panel-title"><a aria-controls="example3" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example3" role="button">Example Three Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
</div>
<div aria-labelledby="heading3" class="panel-collapse collapse" id="example3" role="tabpanel">
<div class="panel-body">
<p>Example Three Body</p>
</div>
</div>
</div>
</div>
The default collapsing panel only allows the heading text to be clickable. I have created custom CSS to ensure the entire heading is clickable.
div.panel-group div.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}
div.panel-group div.panel-heading a:focus,div.panel-group div.panel-heading a:hover{box-shadow:0 0 1.5px 1.5px grey}
div.panel-group .panel-heading{padding:0}
For further information on collapsing elements using buttons and links, see the following sites for further information