Bootstrap Collapsible

Bootstrap 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

Bootstrap Collapsible panel

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

Bootstrap Collapsible List Group

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

Bootstrap Accordion

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:

Bootstrap Collapse Event

Here’s a list of collapse events:

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