Bootstrap Collapse Plugin
The Collapse plugin makes it easy to collapse page areas. Whether you use it to create collapsible navigation or content panels, it allows for many content options.
If you want to individually reference the functionality of this plugin, then you need to referencecollapse.js. Also, in your Bootstrap version, you need to reference theTransition plugin. Or, asBootstrap Plugins Overviewas mentioned in the chapter, you can referencebootstrap.jsor the compressed version ofbootstrap.min.js。
- Create collapsible groups or accordions, as shown below:
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="#collapseOne">Click me to expand, click me again to collapse. Part 1</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Click me to expand, click me again to collapse. Part 2</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Click me to expand, click me again to collapse. Part 3</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div>
Try it »The result is shown below:
- data-toggle="collapse"Add to the link of the component you want to expand or collapse.
- hrefordata-targetThe attribute is added to the parent component, and its value is the child component'sid。
- data-parentThe attribute adds the id of the accordion to the link of the component to be expanded or collapsed.
- Create a simple collapsible component without accordion markup, as shown below:
Example
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible component</button> <div id="demo" class="collapse in"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div>
Try it »The result is shown below:
As you can see in the example, we created a collapsible component; unlike the accordion, we did not add the attributedata-parent。
Usage
The following table lists the classes that the Collapse plugin uses to handle the heavy lifting:
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content. | Try it |
| .collapse.in | Shows the content. | Try it |
| .collapsing | Added when the transition begins, removed when the transition is completed. |
You can use the Collapse plugin in the following two ways:
- Via data attributes: Add to an elementdata-toggle="collapse"anddata-target, automatically assigns control of the collapsible element.data-targetThe attribute accepts a CSS selector and will apply the collapse effect to it. Make sure to add the class to the collapsible element.collapse. If you want it to be open by default, add an additional class.in。
To add accordion-like group management to the collapsible control, add the data attributedata-parent="#selector"。
- Via JavaScript: You can activate the collapse method via JavaScript, as shown below:
$('.collapse').collapse()
Options
Some options can be passed via data attributes or JavaScript. The following table lists these options:
| Option Name | Type/Default Value | Data Attribute Name | Description |
|---|---|---|---|
| parent | selector Default: false | data-parent | If a selector is provided, when a collapsible item is shown, all other collapsible elements under the specified parent will be closed. This is similar to the behavior of a traditional accordion - it relies on the accordion-group class. |
| toggle | boolean Default: true | data-toggle | Toggles the collapsible element on invocation. |
Methods
Below are some useful methods of the Collapse plugin:
| Method | Description | Example |
|---|---|---|
| Options: .collapse(options) | Activates the content as a collapsible element. Accepts an optional options object. |
$('#identifier').collapse({
toggle: false
})
|
| Toggle: .collapse('toggle') | Toggle show/hide for collapsible elements. |
$('#identifier').collapse('toggle')
|
| Show: .collapse('show') | Show collapsible elements. |
$('#identifier').collapse('show')
|
| Hide: .collapse('hide') | Hide collapsible elements. |
$('#identifier').collapse('hide')
|
Example
The examples below demonstrate the usage of the methods:
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="#collapseOne">Click me to expand, click me again to collapse. Part 1 -- hide method</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">Click me to expand, click me again to collapse. Part 2 -- show method</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">Click me to expand, click me again to collapse. Part 3 -- toggle method</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseFour">Click me to expand, click me again to collapse. Part 4 -- options method</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
</div>
<script>
$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
</script>
Try it Yourself »
The result is shown below:
Events
The following table lists the events used in the Collapse plugin. These events can be used as hooks in functions.
| Event | Description | Example |
|---|---|---|
| show.bs.collapse | This event is fired after the show method is called. |
$('#identifier').on('show.bs.collapse', function () {
// 执行一些动作...
})
|
| shown.bs.collapse | This event is fired when the collapsible element is visible to the user (it will wait for the CSS transition to complete). |
$('#identifier').on('shown.bs.collapse', function () {
// 执行一些动作...
})
|
| hide.bs.collapse | This event is fired immediately when the hide instance method is called. |
$('#identifier').on('hide.bs.collapse', function () {
// 执行一些动作...
})
|
| hidden.bs.collapse | This event is fired when the collapsible element is hidden from the user (it will wait for the CSS transition to complete). |
$('#identifier').on('hidden.bs.collapse', function () {
// 执行一些动作...
})
|
Example
The examples below demonstrate the usage of the events:
Example
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseexample">Click me to expand, click me again to collapse. -- shown event</a>
</h4>
</div>
<div id="collapseexample" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('Hey, this warning will be shown when you expand.');})
});
</script>
Try it Yourself »
The result is shown below:
