Bootstrap 4 | Collapse

Last Updated : 04 Mar, 2022

Bootstrap 4 offers different classes for creating collapsible elements. A collapsible element is used to hide or show a large amount of content. When clicking a button it targets a collapsible element, the class transition takes place as follows:

.collapse: It hides the content.
.collapsing: It applied during transitions.
.collapse.show: It shows the content.

Basic Collapsible: The .collapse class indicates a collapsible element i.e. the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add data-toggle = “collapse” attribute to an anchor or a button element. Then add data-target = “#collapseExample” attribute to connect the button with the collapsible content.
Example:

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <title>Bootstrap Collapse Demonstration</title>  
       
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
   
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
       
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
       
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
       
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script> 
  
<head>
  
<body>
    <div class="container">
         
        <!-- Button trigger modal -->
        <h2 class="mb-1" style="padding-bottom: 15px;">
            Toggle Collapse
        </h2>
         
        <p>
            <a class="btn btn-success" data-toggle="collapse"
                    href="#example_1" role="button" 
                    aria-expanded="false" aria-controls="example_1">
                GeeksforGeeks
            </a>
             
            <button class="btn btn-success" type="button" 
                    data-toggle="collapse" data-target="#example_2"
                    aria-expanded="false" aria-controls="example_2">
                Bootstrap
            </button>
        </p>
        <div class="collapse" id="example_1">
            <div class="card card-body">
                GeeksforGeeks is a computer science portal. It is the
                best platform to lean programming. 
            </div>
        </div>
         
        <div class="collapse" id="example_2">
            <div class="card card-body">
                Bootstrap is a free and open-source collection of
                tools for creating websites and web applications.
                It is the most popular HTML, CSS, and JavaScript 
                framework for developing responsive, mobile-first
                web sites.
            </div>
        </div>
     </div>
</body>
</html>

Output:

Multi Toggle Collapsible: A button or anchor tag can show or hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute. Multiple button or anchor tag can show and hide an element if they can reference it with their href or data-target attribute.
Example:

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <title>Bootstrap Collapse Demonstration</title>  
       
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
   
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
       
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
       
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
       
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script> 
  
<head>
  
<body>
    <div class="container">
 
        <h2 class="mb-1" style="padding-bottom: 15px;">
            Toggle Collapse
        </h2>
         
        <p>
            <a class="btn btn-success" data-toggle="collapse" 
                    href="#collapse1" role="button" aria-expanded="false"
                    aria-controls="collapse1">
                Toggle GeeksforGeeks
            </a>
             
            <button class="btn btn-success" type="button" 
                    data-toggle="collapse" data-target="#collapse2"
                    aria-expanded="false" aria-controls="collapse2">
                Toggle Bootstrap
            </button>
             
            <button class="btn btn-success" type="button" 
                    data-toggle="collapse" data-target=".multi-collapse"
                    aria-expanded="false" aria-controls="collapse1 collapse2">
                Toggle both
            </button>
        </p>
         
        <div class="collapse multi-collapse" id="collapse1">
            <div class="card card-body">
                GeeksforGeeks is a computer science portal. It is the
                best platform to lean programming. 
            </div>
        </div>
     
        <div class="collapse multi-collapse" id="collapse2">
            <div class="card card-body">
                Bootstrap is a free and open-source collection of
                tools for creating websites and web applications.
                It is the most popular HTML, CSS, and JavaScript 
                framework for developing responsive, mobile-first
                web sites.
            </div>
        </div>
    </div>
</body>
 
</html>

Accordion: The following example shows a simple accordion by extending the panel component. The use of data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is shown.
Example:

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <title>Bootstrap Collapse Demonstration</title>  
       
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
   
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
       
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
       
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
       
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script> 
  
<head>
  
<body>
    <div class="container">
 
        <h2 style="padding-bottom: 15px;">
            Accordion
        </h2>
         
        <div id="accordion">
            <div class = "card">
                <div class = "card-header">
                    <a class = "card-link" data-toggle = "collapse"
                            href = "#description1">
                        GeeksforGeeks
                    </a>
                </div>
             
            <div id = "description1" class = "collapse show"
                data-parent = "#accordion">
                    <div class = "card-body">
                        GeeksforGeeks is a computer science portal. It
                        is the best platform to lean programming.    
                    </div>
                </div>
            </div>
             
            <div class = "card">
               <div class = "card-header">
                  <a class = "collapsed card-link" data-toggle = "collapse" 
                        href = "#description2">
                     Bootstrap
                  </a>
               </div>
               <div id = "description2" class = "collapse"
                        data-parent = "#accordion">
                    <div class = "card-body">
                        Bootstrap is a free and open-source collection of
                        tools for creating websites and web applications.
                        It is the most popular HTML, CSS, and JavaScript 
                        framework for developing responsive, mobile-first
                        web sites.  
                    </div>
               </div>
            </div>
             
            <div class = "card">
                <div class = "card-header">
                    <a class = "collapsed card-link" data-toggle = "collapse" 
                            href = "#description3">
                        HTML
                  </a>
                </div>
                <div id = "description3" class = "collapse"
                        data-parent = "#accordion">
                    <div class = "card-body">
                        HTML stands for Hyper Text Markup Language. It
                        is used to design web pages using markup
                        language. HTML is the combination of Hypertext
                        and Markup language. Hypertext defines the link
                        between the web pages. Markup language is used
                        to define the text document within tag which
                        defines the structure of web pages.
                    </div>
               </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

Suggest improvement

Bootstrap 4 | Carousel

Bootstrap 4 | Dropdowns

Share your thoughts in the comments

Layout

Content

Components

Utilities

Extend

Bootstrap 4 | Collapse

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?