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:

See online demo and code

The mark up:

<p>

Click for collapse/exapnd

</a>

Click the link button

</a>

</p>

The demo of collapse/expand content by Bootstrap 4 collapse classes.

</div>

May contain different content like text, images, videos etc. <br />

</div>

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.

See online demo and code

The code:

<h3>Bootstrap 4 collapse</h3>

<p>

Toggle Content visibility

</button>

Mixed content demo

</button>

</p>

The demo of collapse/expand content by Bootstrap 4 collapse classes.

</div>

May contain different content like text, images, videos etc. <br />

</div>

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.

See online demo and code

The code of collapsible accordion:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<div class="container">

<h3>Bootstrap 4 collapse/expand Accordion</h3>

<div id="demo-accordion-collapse" role="tablist">

<div class="card">

    <div class="card-header" role="tab" id="accord1">

      <h5 class="mb-0">

        <a data-toggle="collapse" href="#collapse-pane-1" role="button" aria-expanded="true" aria-controls="collapse-pane-1">

          Bootstrap 4 Tutorial

        </a>

      </h5>

    </div>

    <div id="collapse-pane-1" class="collapse show" role="tabpanel" aria-labelledby="accord1" data-parent="#demo-accordion-collapse">

      <div class="card-body">

        The content for the Bootstrap tutorial header goes here. You may use text, images, videos etc. here.<br />

        A like Bootstrap 4 tutorials. <br />

        An image - <img src="https://www.jquery-az.com/wp-content/uploads/2017/10/logo.jpg" width="200" height="150">

      </div>

    </div>

</div>

<div class="card">

    <div class="card-header" role="tab" id="accord2">

      <h5 class="mb-0">

        <a class="collapsed" data-toggle="collapse" href="#collapse-pane-2" role="button" aria-expanded="false" aria-controls="collapse-pane-2">

          Bootstrap Forms

        </a>

      </h5>

    </div>

    <div id="collapse-pane-2" class="collapse" role="tabpanel" aria-labelledby="accord2" data-parent="#demo-accordion-collapse">

      <div class="card-body">

        The content for form pane

      </div>

    </div>

</div>

<div class="card">

    <div class="card-header" role="tab" id="accord3">

      <h5 class="mb-0">

        <a class="collapsed" data-toggle="collapse" href="#collapse-pane-3" role="button" aria-expanded="false" aria-controls="collapse-pane-3">

          Bootstrap Tables

        </a>

      </h5>

    </div>

    <div id="collapse-pane-3" class="collapse" role="tabpanel" aria-labelledby="accord3" data-parent="#demo-accordion-collapse">

      <div class="card-body">

        The Bootstrap has classes for creating and styling the tables beautifully.

      </div>

    </div>

</div>

</div>

</div>

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.

See online demo and code

The markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<div class="container">

<h3>Bootstrap 4 multiple element collapse/expand</h3>

<p>

<a class="btn btn-success" data-toggle="collapse" href="#Collapse-demo-multipl-1" role="button" aria-expanded="false" aria-controls="Collapse-demo-multipl-1">Show/Hide first element</a>

<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#Collapse-demo-multipl-2" aria-expanded="false" aria-controls="Collapse-demo-multipl-1">Collapse/Expand second element</button>

<button class="btn btn-danger" type="button" data-toggle="collapse" data-target=".multi-collapse-example" aria-expanded="false" aria-controls="Collapse-demo-multipl-1 Collapse-demo-multipl-1">Collapse/Expand both elements</button>

</p>

<div class="row">

<div class="col">

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

      <div class="card card-body">

        Information of first elements comes here.



      </div>

    </div>

</div>

<div class="col">

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

      <div class="card card-body">

        Information of second elements comes here.

      </div>

    </div>

</div>

</div>

</div>

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.

Related Tutorials:

5 Examples to Understand Using Bootstrap 5 Accordion

The button styles in Bootstrap 4

The Bootstrap 4 Cards Component

Bootstrap 5 Collapse – Show/Hide Content [5 Examples]

Bootstrap 5 Progress – Simple, Striped, Animated and More

The Dropdown in Bootstrap 4

Bootstrap accordion with toggle button: 3 demos

How to Create Button Groups in Bootstrap 5

What is a split button for?

jQuery accordion plugin with 7 examples