Bootstrap 4 Collapse

Collapse is a bootstrap component that is similar to the dropdown button. Collapse is used to hide or show the content such as paragraphs, sentences, etc.  When we click on a collapse button, a panel will open with a large amount of text.

How to create

The steps that are used to create collapse are given below:-

  • Add the .collapse class and id = “demo” to the <div> element to show/hide the content when we click on collapse button.
  • Add the CSS attribute data-toggle=”collapse” to the <a> (anchor) element or <button> element.
  • Then, add CSS attribute data-target= ”#id” to the <button> element for connecting the collapse button to the content which we want to show/hide.

Note

If you use a <a> element instead of <button> element then use href attribute instead of data-target attribute.

If you want to make your content visible instead of hidden (which is the default), then use .show class.

Example

This example shows how to create collapse using <a> element.

Output

Bootstrap Collapse

Example

This example shows how to create a collapse using <button> element.

Output

Bootstrap Collapse

Accordion

An accordion is a card component. We can create the accordion by extending collapse and adding some classes and attributes.

In accordion, the data-parent attribute is used to ensure that only one collapsible element will be visible at a time.

 Example

Output

Bootstrap Collapse

Pin It on Pinterest

Share This