Related Articles

Related Articles

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :