Open In App

Bootstrap 5 Collapse

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Collapse is used to toggle the visibility of content across your project with a few classes and the JavaScript plugins which comes with Bootstrap 5. The working of collapse component is based on class changes which are applied. For example, .collapse to hide the content .collapsing is applied during transitions and .collapse.show shows the content.
Syntax:

<div class="collapse"> Contents... <div>

Example 1: This example uses show the working of collapsible div with button and link in Bootstrap 5.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
         
<p>
            <a class="btn btn-primary" data-toggle="collapse"
                href="#collapseExample" role="button">
                Link with href
            </a>
            <button class="btn btn-primary" type="button"
                data-toggle="collapse" data-target="#collapseExample">
                Button with data-target
            </button>
        </p>
 
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                GeeksforGeeks
            </div>
        </div>
    </div>
</body>
</html>


Output:

 
Example 2: This example uses show the working of collapsible cards in Bootstrap 5.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="accordion" id="accordionExample">
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block
                                text-left collapsed"
                            type="button" data-toggle="collapse"
                            data-target="#collapseThree">
                            Click Here
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse"
                    data-parent="#accordionExample">
                    <div class="card-body">
                        This is Bootstrap Collapse | GeeksforGeeks
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Example 3: This example uses show the working of multiple collapsible divs in Bootstrap 5.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
         
<p>
            <a class="btn btn-primary" data-toggle="collapse"
                href="#multiCollapseExample1" role="button">
                Toggle firs element
            </a>
            <button class="btn btn-primary" type="button"
                data-toggle="collapse"
                data-target="#multiCollapseExample2">
                Toggle second element
            </button>
            <button class="btn btn-primary" type="button"
                data-toggle="collapse"
                data-target=".multi-collapse">
                Toggle both elements
            </button>
        </p>
 
        <div class="row">
            <div class="col">
                <div class="collapse multi-collapse"
                    id="multiCollapseExample1">
                    <div class="card card-body">
                        This is first element
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="collapse multi-collapse"
                    id="multiCollapseExample2">
                    <div class="card card-body">
                        This is second element
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:



Last Updated : 05 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads