Bootstrap JS Collapse
JS Collapse (collapse.js)
Get base styles and flexible support for collapsible components like accordions and navigation.
Plugin dependency: Collapse requires the transitions plugin to be included in your version of Bootstrap.
The Collapse Plugin Classes
Class |
Description |
Example |
.collapse |
Hides the content |
Try it |
.collapse in |
Shows the content |
Try it |
.collapsing |
Added when the transition starts, and removed when it finishes |
|
Via data-* Attributes
Just add data-toggle="collapse" and a data-target to element to automatically
assign control of a collapsible element. The data-target attribute accepts a CSS
selector to apply the collapse to. Be sure to add the class collapse to the
collapsible element. If you'd like it to default open, add the additional class
in.
To add accordion-like group management to a collapsible control, add the data
attribute data-parent="#selector".
Via JavaScript
Enable manually with:
$('.collapse').collapse()
Options
Options can be passed via data attributes or JavaScript. For data attributes,
append the option name to data-, as in data-parent="".
Name |
Type |
Default |
Description |
parent |
selector |
false |
If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the panel class) |
toggle |
boolean |
true |
Toggles the collapsible element on invocation |
Examples
Simple Collapsible
The following example makes a button
toggle the expanding and collapsing of another element:
Example
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
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.
</div>
Try it Yourself »
Accordion
The following example shows a simple accordion by extending the panel component:
Example
<div class="panel-group" id="accordion">
<div class="panel
panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible
Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse
collapse in">
<div class="panel-body">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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible
Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse
collapse">
<div class="panel-body">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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible
Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse
collapse">
<div class="panel-body">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.</div>
</div>
</div>
</div>
Try it Yourself »
Color Picker