Skip to content
Related Articles

Related Articles

Improve Article

Bootstrap 5 Collapse

  • Last Updated : 11 Sep, 2020

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.




<!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.




<!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.




<!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 first 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :