Robert "Bob" Smith
Bob originally created this guide. The goal was to assist librarians in utilizing Bootstrap within LibGuides.
As of Feb. 2nd, 2024, Bob has left the employ of West Texas A&M University.
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