Open In App

Bootstrap 5 Collapse Usage

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Collapse is a component used to create collapsible content panels. It allows you to hide and show content on demand. Collapse is useful when you have a lot of content on a page and need to display it in a more organized manner.

You can refer here for further details about Bootstrap 5 Collapse.

Collapse plugin uses few classes to handle the heavy lifting.

  • .collapse: This class is used to hide the content.
  • .collapsing: This class is applied during transitions.
  • .collapse.show: This class is used to show the content.
  • Collapse Usage:

    • Using Data attributes: we can implement that by making data-toggle=”collapse” and adding data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse.
    • Using JavaScript: We can implement that using JavaScript by just adding a simple statement manually.                      
    • Options: Options can be the elements that can be passed through data attributes or JavaScript. To pass the options via data attributes we need to append the option name with data-bs-. For example data-bs-parent. There are some collapse options like a parent, toggle, etc. 
    • Methods: Methods are to implement different functionalities to over-collapse elements. We have different methods like toggle, options, hide, and dispose of.
    • Events: There are different events exposed by Bootstrap’s collapse class for hooking into collapse functionality show.bs.collapse,  shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse

     

    Example 1: In this example, we will demonstrate bootstrap 5 collapses.

    HTML




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap 5 Collapse Usage</title>
        <link href=
            rel="stylesheet">
        <script src=
        </script>
    </head>
      
    <body>
        <div class="container text-center">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
              
            <strong>Bootstrap5 Collapse Usage</strong>
              
            <button type="button" 
                class="btn btn-primary" 
                data-bs-toggle="collapse" 
                data-bs-target="#collapse_id">
                Click me to show data
            </button>
      
            <div id="collapse_id" class="collapse">
                GeeksforGeeks is a Computer Science 
                portal for geeks. It contains well 
                written, well thought and well
                explained computer science and 
                programming articles
            </div>
        </div>
    </body>
      
    </html>

    
    

    Output:

     

    Example 2: In this example, we will demonstrate the bootstrap 5 collapse option data-bs-parent.

    HTML




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap 5 Collapse Usage</title>
        <link href=
            rel="stylesheet">
        <script src=
        </script>
    </head>
      
    <body>
        <div class="container">
            <center>
                <h1 class="text-success">
                    GeeksforGeeks
                </h1>
                <strong>
                    Bootstrap5 Collapse Usage
                </strong>
                <div id="accordion">
                    <button class="btn btn-primary" 
                        data-bs-toggle="collapse" 
                        href="#collapse1">
                        Collapse element 1
                    </button>
                    <div id="collapse1" 
                        class="collapse show" 
                        data-bs-parent="#accordion">
                        <div>
                            GeeksforGeeks is a Computer 
                            Science portal for geeks.
                        </div>
                    </div>
                    <br>
                    <button class="btn btn-primary" 
                        data-bs-toggle="collapse" 
                        href="#collapse2">
                        Collapse element 2
                    </button>
                    <div id="collapse2" class="collapse" 
                        data-bs-parent="#accordion">
                        <div>
                            GeeksforGeeks is a Computer 
                            Science portal for geeks.
                        </div>
                    </div>
                    <br>
                    <button class="btn btn-primary" 
                        data-bs-toggle="collapse" 
                        href="#collapse3">
                        Collapse element 3
                    </button>
                    <div id="collapse3" class="collapse" 
                        data-bs-parent="#accordion">
                        <div>
                            GeeksforGeeks is a Computer 
                            Science portal for geeks.
                        </div>
                    </div>
                </div>
            </center>
        </div>
    </body>
      
    </html>

    
    

    Output:

     

    Reference: https://getbootstrap.com/docs/5.0/components/collapse/#usage



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