Authored by
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 Collapse Using a Link or Button
Using a Link
Using an Button
Code with Explanations
Using a Link
Using a Button
The button collapse is very similar to the <a> collapse. However, there are a couple differences to make note below.
<button class="btn btn-lib" type="button" data-toggle="collapse" data-target="#collapseEX2" aria-expanded="false" aria-controls="collapseEX2">Peeka</button>
<div class="collapse" id="collapseEX2">
<p>Boo!</p>
</div>
Code for Copying
Using a Link
<a class="btn btn-lib" role="button" data-toggle="collapse" href="#collapseEX1" aria-expanded="false" aria-controls="collapseEX1">Peeka</a>
<div class="collapse" id="collapseEX1">
<p>Boo!</p>
</div>
Using a Button
<button class="btn btn-lib" type="button" data-toggle="collapse" data-target="#collapseEX2" aria-expanded="false" aria-controls="collapseEX2">Peeka</button>
<div class="collapse" id="collapseEX2">
<p>Boo!</p>
</div>
For Further Information
For further information on collapsing elements using buttons and links, see the following sites for further information