Bootstrap 4 | Collapse - GeeksforGeeks

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:  
 
germanshephered48
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to change the background color of the active nav-item?
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?