Bootstrap Collapsible

Basic Collapsible

Bootstrap Collapsibles can be used to hide/show large amount of content. Here’s the sample code for a basic collapsible element

Here, the .collapse class is the basic contextual class for the collapsible element.

You can use this class with elements like <div>; thus, the content can be hidden or made visible for that specific <div> by just clicking a button.

The data-toggle=”collapse” attribute is used with the button element for controlling the collapsible content.

The connection between the collapsible element and the button is indicated using the data-target=”#id”.

If you’re using an <a> element, the href attribute can replace the data-target attribute. Observe the below code for the illustration:

The collapsible content is always hidden by default. However, if you want it to be shown by default, you can use the .in class

Collapsible panel

Bootstrap has a provision for collapsible panel as well. Following code will illustrate the same:

Collapsible List Group

You can also create a collapsible list group using following code:


Accordion is a special extension of collapsible component where you can group multiple panels to be individually collapsible. You need to specify a parent for these collapsible elements using data-parent so that at a time at most one element is visible. Here’s the code for illustrating the accordion feature:

Collapse Event

Here’s a list of collapse events:

  • bs.collapse
  • bs.collapse
  • bs.collapse
  • bs.collapse