Bootstrap Collapse Plugin

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.

  1. Add this attribute data-toggle=”collapse” in the anchor tag on which you click to expand or collapse the content area.

  2. Add any attribute both of these href or a data-target for the parent component and use value is id of the child component.

  3. This attribule data-parent is used for creating accordion like effect.

Use this code to make simple collapsible without the accordion markup:

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.


The collapse plugin utilizes a below listed classes to handle the heavy lifting:

Class Description
.collapse hides the content 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:


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.


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.
Toggle: .collapse(‘toggle’) Toggles a collapsible element to shown or hidden.
Show: .collapse(‘show’) Shows a collapsible element.
Hide: .collapse(‘hide’) Hides a collapsible element.


These examples show the usage of methods:


Following table lists few events for hooking into collapse functionality.

Event Description This event is fired after the show method is called. This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). This event is fired when the hide instance method has been called. This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).


The following example shows the usage of events:

Leave a Reply

Your email address will not be published. Required fields are marked *