Bootstrap Collapse Plugin
Introduction
Bootstrap is one of the most popular CSS frameworks for developing responsive websites.
Bootstrap provides us with easy ways to style websites, and it is significantly less verbose.
In this article, we will discuss the collapse plugin available in Bootstrap’s .collapse class. We will learn about the usage of collapse plugins.
We will also learn about the usage, methods and events when working with Bootstrap and also see about its implementation.
Bootstrap Collapse Plugin
The collapse plugin makes it easy to make collapsing divisions of the page. Whether you use it to build an accordion navigation or content boxes, it allows for a lot of content options.
If you want to include this plugin functionality individually, then you will need the collapse.js. This also requires the Transition Plugin to be included in your version of Bootstrap. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified bootstrap.min.js.
You can use the collapse plugin −
- To create collapsible groups or accordions. This can be created as in the sample example below:
<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.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 expand. 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 expand. 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>
- data-toggle = "collapse" is added to the link on which you click to expand or collapse the component.
- href or a data-target attribute is added to the parent component, whose value is id of the child component.
- data-parent attribute is added for creating the accordion-like effect.
- To create simple collapsible without the accordion markup − This can be created as in the sample example below −
<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>
As you can see in the example we have created a simple collapsible component, unlike accordion, we haven't added the attribute data-parent.
The above state will change to the below state after the click of a button.
Usage
The following table lists the classes that the collapse plugin utilizes to handle the heavy lifting −
| Sr.No. | Class &Description |
| 1 | .collapse Hides the content. |
| 2 | .collapse.in Shows the content. |
| 3 | .collapsing Is added when the transition starts, and removed when it finishes. |
You can use the collapse plugin in two ways −
- Via data attributes − 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 be activated with JavaScript as shown below −
$('.collapse').collapse()Options
There are certain options which can be passed via data attributes or JavaScript are listed in the following table −
| Option Name | Type/Default Value | Data attribute name | Description |
| parent | selector Default − false | data-parent | If selector is false, then all collapsible elements under the specified parent will be closed (similar to traditional accordion behavior - this dependent on the accordion-group class). |
| toggle | boolean Default − true | data-toggle | Toggles the collapsible element on invocation. |
Methods
Here is a list of some useful methods that are used with collapsible elements.
| Method | Description | Example |
| Options − .collapse(options) | Activates your content as a collapsible element. Accepts an optional options object. | $('#identifier').collapse({ toggle: false })
|
| 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
The following example demonstrates 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 expand. 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 expand. 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 expand. 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 expand. 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>
Output
Events
The following table lists a few events that can be used with the collapse functionality.
| Event | Description | Example |
| show.bs.collapse | Fired after the show method is called. | $('#identifier').on('show.bs.collapse', function () { // do something })
|
| 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 () { // do something }) |
| hide.bs.collapse | Fired when the hide instance method has been called. | $('#identifier').on('hide.bs.collapse', function () { // do something })
|
| 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 () { // do something }) |
Example
The following example demonstrates 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 expand. 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>
Output
Frequently Asked Questions (FAQs)
- What are collapses in Bootstrap?
The collapse in bootstrap is used to toggle the visibility of content across your project with a few classes and our JavaScript plugins.
- What are collapse plugins in Bootstrap?
The collapse plugin makes it easy to make collapsing divisions of the page. Whether you use it to build accordion navigation or content boxes, it allows for a lot of content options.
Key Takeaways
We have learned about the various types of collapses in Bootstrap. We also learned about the collapse plugins in Bootstrap. We also learned about the different methods and events of the collapse plugin in Bootstrap. This article also explained the implementation of the usage of the collapse plugin available in Bootstrap.
For more information about the react framework for frontend development, get into the entire Frontend web development course.
Happy Learning!
Comments
No comments yet
Be the first to share what you think