The Bootstrap Collapse plugin behave same like accordions and makes it easy to collapsing division of the page. This component allows for many content options, when you try to make content box and accordion navigation.
If you want to implement functionality of this plugin individually, simple include the collapse.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.
Here are the code which you can use for collapse plugin:
Use this code to build a collapsible groups or accordion panel.
<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 exapand. Click me again to collapse.Section 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 exapand. Click me again to collapse.Section 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 exapand. Click me again to collapse.Section 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>
Add this attribute data-toggle=”collapse” in the anchor tag on which you click to expand or collapse the content area.
Add any attribute both of these href or a data-target for the parent component and use value is id of the child component.
This attribule data-parent is used for creating accordion like effect.
Use this code to make simple collapsible without the accordion markup:
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo">
simple collapsible
</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>
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element. Here is not using attribute of data-parent.
Usage
The collapse plugin utilizes a below listed classes to handle the heavy lifting:
| Class | Description |
|---|---|
| .collapse | hides the content |
| .collapse.in | shows the content |
| .collapsing | is added when the transition starts, and removed when it finishes |
There are two ways to use use collapse plugin:
Via data attributes
Simply add data-toggle=”collapse” and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute will accept 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, include the additional class .in.
To add accordion-like group management to a collapsible control, add the data attribute data-parent=”#selector”.
Via JavaScript
The collapse method can enabled manually via JavaScript as below:
$('.collapse').collapse()Options
In the following listed Collapse plugin options you can pass via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".
| Option Name | Type | Default | Data attribute name | Description |
|---|---|---|---|---|
| parent | selector | false | data-parent | 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 accordion-group class) |
| toggle | boolean | true | data-toggle | Toggles the collapsible element on invocation. |
Methods
These methods are useful tow work with collapsible elements.
| Method | Description | Example |
|---|---|---|
Options: .collapse(options) | Activates your content as a collapsible element. Accepts an optional options object. | $('#identifier').collapse( |
Toggle: .collapse(‘toggle’) | Toggles a collapsible element to shown or hidden. | $('#identifier').collapse('toggle') |
Show: .collapse(‘show’) | Shows a collapsible element. | $('#identifier').collapse('show') |
Hide: .collapse(‘hide’) | Hides a collapsible element. | $('#identifier').collapse('hide') |
Example
These examples show the usage of methods:
<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 exapand. Click me again to collapse.
Section 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 exapand. Click me again to collapse.
Section 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 exapand. Click me again to collapse.
Section 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 exapand. Click me again to collapse.
Section 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 type="text/javascript">
$(function () $('#collapseFour').collapse(
toggle: false
));
$(function () $('#collapseTwo').collapse('show'));
$(function () $('#collapseThree').collapse('toggle'));
$(function () $('#collapseOne').collapse('hide'));
</script>
Events
Following table lists few events for hooking into collapse functionality.
| Event | Description |
|---|---|
| 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 a collapse element has been made visible to the user (will wait for CSS transitions to complete).$('#identifier').on('shown.bs.collapse', function () |
| hide.bs.collapse | This event is fired when the hide instance method has been called.$('#identifier').on('hide.bs.collapse', function () |
| hidden.bs.collapse | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).$('#identifier').on('hidden.bs.collapse', function () |
Example
The following example shows the usage of events:
<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 exapand. Click me again to collapse.
Section --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 type="text/javascript">
$(function ()
$('#collapseexample').on('show.bs.collapse', function ()
alert('Hey, this alert shows up when you expand it');)
);
</script>
Bootstrap Collapse Plugin
No comments:
Post a Comment