Bootstrap 5 Collapse

Bootstrap 5 Collapse

The bootstrap 5 collapse feature is used to show and hide the content.

Steps to create bootstrap 5 collapsible component:

  • Use either <a> or <button> to link collapsible element via href attribute of <a> and button data attribute data-bs-target.
  • Add data attribute data-bs-toggle="collapse" to either <a> or <button> and other data attribute data-bs-target="#id-of-collpasible-element" to only <button> while as href="#" attribute is used by <a> to link collasible element by id.
  • Assign collapsible container id to <button> data attribute data-bs-target="#IdOfCollapsibleContainer" and href="#IdOfCollapsibleContainer" attribute of <a> element.Please keep in mind that assigning collpasible container id inside data attribute of data-bs-target and href is must be preceded by hash chracter(#).

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap 5 Collpase

This panel is hidden by default but revealed when the user clicks the button. Let us see it with an example.

Code Explanation

Note:Please keep in mind that by default collapsible element is hidden. To show the hidden content, you have to use .show to collapsible elements(<div>containing class.collapse).

Links With Collapse

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

This is the body content of the collapsible. It is by default hidden and it will be shown when the user clicks the link.

Code Explanation

Note:In this example, the link is used to show and hide the collapsible content.

Multiple targets

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, maxime est. Laborum blanditiis aperiam fuga neque ut ad provident nam.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, maxime est. Laborum blanditiis aperiam fuga neque ut ad provident nam.

Code Explanation

Note:In this example, multiple target element is used to show and hide the collapsible content.

Online Test / Quiz