Bootstrap 5 Collapse - GeeksforGeeks

05 May, 2022
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="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"        crossorigin="anonymous">    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"        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="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"        crossorigin="anonymous">    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"        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="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"        crossorigin="anonymous">    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"        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:
sahilintern
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?