Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about the Bootstrap Collapse Plugin.
Bootstrap collapse plugin makes it easy to make collapsing divisions of the web page. Whether you use it in building an accordion navigation or content boxes, it allows for a lot of content options.
Bootstrap collapse plugin makes it easy to make collapsing divisions of the web page. Whether you use it in building an accordion navigation or content boxes, it allows for a lot of content options.
If you want to add this bootstrap plugin functionality individually, you are going to need collapse.js. This also needs the transition plugin to be included in your Bootstrap version. Else, as mentioned in the tutorial Bootstrap plugins overview, you can add bootstrap.js or the manified bootstrap.min.js.
You can use the collapse plugin -
- To create collapsible groups or accordion - This can be created as seen in the simple 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 which you click to expand or collapse the component.
- href or a data-target 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.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
- To create simple collapsible without the accordion markup - This can be created as shown in the 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>
READ: Bootstrap | Modal Plugin
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 make use of collapse plugin in two ways -
- By using data attributes - add data-toggle = "collapse" and a data-target to the element to 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 .collapse class to the collapsible element. If you would like it to default open, add the additional class .in.
In order 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 using JavaScript as shown below -
$('.collapse').collapse()
Options
There are certain options that can be added via data attributes or JavaScript. Following table below lists these options -
| 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
Following is a list of some useful methods that are used with collapsible element -
| 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
Following example demonstrates the usage of the collapse plugin 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
When the above example is executed, it will produce the following result -
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Events
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
Following example demonstrates the usage of collapse plugin 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
When the above example is executed, it will produce the following result -
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Carousel Plugin.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.