Bootstrap Collapse
Description
In this tutorial, you will learn how to create collapsible components with Bootstrap.
What is required
You must reference jquery.js and bootstrap-collapse.js - both of these JavaScript files are located in the docs/assets/js folder.
You can create collapsible components without writing much JavaScript or calling JavaScript.
Example
The first example demonstrates how to create a collapsible component without calling JavaScript.
Example
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="../index.html">
Click me to expand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="../index.html">
Click me to expand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="../index.html">
Click me to expand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
View example online
Explanation
There are three points to note. First, adddata-toggle="collapse"to the link you want to click, to expand or collapse the component.
Second, add ahrefor adata-targetattribute to the parent component, whose value is the id of the child component.
Third, add adata-parentattribute to create an accordion effect. The value of the data-parent attribute is the same as the id attribute of the main container div (which holds the entire accordion component). If you want to create a simple collapsible component, not as complex as an accordion, you do not need to add this attribute.
Example
The second example demonstrates how to create a simple collapsible component.
Example
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
View example online
Call via JavaScript
You can use the following code to trigger collapse via JavaScript.
$(".collapse").collapse()
Options, Methods, and Events
Here are some options, methods, and events used by the Bootstrap Collapsible JavaScript plugin. They are as follows:
Options
parent:The value type is Selector. The default value is false. When the parent element is shown, all collapsible elements under the parent are closed.
toggle:The value type is Boolean. The default value is true. When called, toggles all collapsible elements.
toggle:The value type is Boolean. The default value is true. When called, toggles all collapsible elements.
Methods
.collapse(options):Triggers collapsible content. Accepts an optional option object.
.collapse('toggle'):Shows or hides a collapsible page element.
.collapse('show'):Shows a collapsible page element.
.collapse(hide):Hides a collapsible page element.
Events
show:WhenshowThis event is triggered immediately after the instance method is called.
shown:This event is triggered after the collapsible page element is shown (and the CSS transition has also completed).
hide:WhenhideThis event is triggered immediately after the instance method is called.
hidden:This event is triggered after the collapsible page element is hidden from the user (and the CSS transition has also completed).
Click here to download all the HTML, CSS, JS, and image files used in this tutorial.
Other extensions