Lesson 19: How to Use Collapse in Bootstrap 5

Collapse in Bootstrap 5 allows you to hide or show content on a page using several JavaScript classes and plugins. Here's what you need to know about Collapse in Bootstrap 5 .

Basic Usage of Collapse in Bootstrap 5

Collapse is useful when you want to hide and show a large amount of content on a page. Basically, the code would look like this:

CollapsibleEnglish example text

For example:

 Bootstrap Example 

Simple Content Hide/show Button

Click the button to hide or show the content.

 TipsMake.comEnglish example text

Detailed explanation:

The class .collapse indicates the collapsible element () . This is the content that will be shown or hidden with a single click of a button.

To control collapsible (show/hide) content, add the attribute data-bs-toggle="collapse" to the element or bar.Then, add data-bs-target="#id" to connect that button to the collapsible content().

Note: For the `data-bs-target` factor, you can use the `href` attribute instead of `data-bs-target` .

Collapsible Lorem ipsum dolor text. 

By default, collapsible content is hidden. However, you can add a class .showto display it by default:

 Lorem ipsum dolor text. 

For example:

 Bootstrap Example 

By Default, the Content Is Displayed in a Collapsible Format

Add the `.show` class next to the `collapse` class to default to displaying the content.

Click the button to toggle between showing and hiding the content.

 English example textEnglish example text

Accordion

This is a collapsible menu design in a stacked format. Note that the `data-bs-parent` property is used to ensure that all collapsible elements within a specific parent element will close when one of the collapsible items is displayed.

Basic code:

 Collapsible Group Item #1 Lorem ipsum. Collapsible Group Item #2 Lorem ipsum. Collapsible Group Item #3 Lorem ipsum. 

For example:

 Bootstrap Example 

An Example of an Accordion in Bootstrap 5

Note: The `data-bs-parent` property ensures that all collapsible elements within the parent item are closed when another collapsible item appears.

English example text

Above is how to collapse and expand menus on websites and applications using Bootstrap 5's Collapse feature . This component is quite easy to use with two basic styles. Remember it to diversify your project designs!