The Bootstrap 4 Collapse component

The Collapse component of Bootstrap 4 is useful when you have content to show/hide upon user’s action.

For example, you have information on panels or accordion that has a heading and detailed text (maybe images as well). You may enable your visitors to expand the content by clicking the panel or heading and if not interested collapse the content.

Bootstrap 4 has built-in classes and JS plug-in that you may use to accomplish this task. In the next section, you can see live examples of using Bootstrap collapse related classes in action with complete code.

An example of collapse/expand content via links in card (panels)

In the first example of using collapse component, I have used two links that toggle the content visibility as you click on them. Have a look at the demo and code and I will explain how it works:

Bootstrap 4 collapse

See online demo and code

The mark up:

In the link tag, the data-toggle=”collapse” is required data attribute. In the href attribute, I specified the democollapseLink, which is the ID of <div> tag where a card is created. So, this is linked to the card that collapses or expands as you click on the link.

The main <div> is given the .collapse class i.e.

<div class=”collapse” id=”democollapseLink”>

I will explain how this .collapse class works after the examples.

Similarly, the other link is assigned the button classes with role=”button” attribute. This expands or collapses its own card where I also used an image to show that you may use various types of content.

Did you know? You need to include the popper.js and jQuery before bootstrap.js (or minified versions). Otherwise, collapse component will not work.

The example with buttons

The following example shows using buttons to collapse and expand the Bootstrap cards content. Like the link, the data-toggle=”collapse” attribute is required for buttons as well.

Bootstrap 4 collapse buttons

See online demo and code

The code:

Did you know? In Bootstrap 4, the panels, wells, and thumbnails of Bootstrap 3 are replaced by cards. You may modify the cards and get the same functionality. 

How to show a specific content container at startup

If you desire to show the content of collapsible container as the web page loads then use the .show class along with .collapse class.

See the following example where second div content is displayed as the example page loads:

See online demo and code

I have only changed this line of code than above example:

<div class=”collapse show” id=”democollapseimg”>

The example of collapse Bootstrap with accordion

In the following example, an accordion is created by using Bootstrap 4 classes. By default, the first panel’s content is visible by using the .show class in the <div> containing first accordion panel content.

Bootstrap 4 collapse accordion

See online demo and code

The code of collapsible accordion:

In the code, the data-parent=”#demo-accordion-collapse” attribute is used. This ensures that as one accordion panel is opened, all others are closed. If you want to keep all panes open unless user closes it by clicking the header then simply remove that attribute.

For example, have a look at the demo below where I just removed the data-parent attribute from the above example code:

See online demo and code

If you open second and third panels, the first remain opened.

Collapse/Expand multiple elements example

You may also show or hide multiple elements upon clicking a link or button.

Bootstrap 4 collapse multiple

See online demo and code

The markup:

You see, the second button with “Collapse/Expand both elements” used the data-target and its value is assigned as a class to both main div containing .collapse class. That is:

<div class=”collapse multi-collapse-example” id=”Collapse-demo-multipl-1″>

And

<div class=”collapse multi-collapse-example” id=”Collapse-demo-multipl-2″>

How does Bootstrap 4 collapse work?

As you press a button or link, the .collapse class hides the content of the element. The .collapsing is assigned during transitions while .collapse .show shows the content.