Bootstrap 4 | Collapse

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        
    <script src
    </script
        
    <script src
    </script
        
    <script src
    </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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        
    <script src
    </script
        
    <script src
    </script
        
    <script src
    </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>

chevron_right


Accordian: 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        
    <script src
    </script
        
    <script src
    </script
        
    <script src
    </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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Know more about me at https//gagantalrejagithubio

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.