Bootstrap 4 Collapse
Bootstrap 4 Collapse
Collapse is a bootstrap component that is similar to the dropdown button. Collapse is used to hide or show the content such as paragraphs, sentences, etc. When we click on a collapse button, a panel will open with a large amount of text.
How to create
The steps that are used to create collapse are given below:-
- Add the .collapse class and id = “demo” to the <div> element to show/hide the content when we click on collapse button.
- Add the CSS attribute data-toggle=”collapse” to the <a> (anchor) element or <button> element.
- Then, add CSS attribute data-target= ”#id” to the <button> element for connecting the collapse button to the content which we want to show/hide.
Note
If you use a <a> element instead of <button> element then use href attribute instead of data-target attribute.
If you want to make your content visible instead of hidden (which is the default), then use .show class.
Example
This example shows how to create collapse using <a> element.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Collapse Example</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.4.1/css/bootstrap.min.css"> </head> <div class="container"> <h2>Simple Collapse</h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Collapse Button</a> <div id="demo" class="collapse"> A collapse is a bootstrap component which is similar to the dropdown button. Collapse is used to hide or show the content such as paragraph, sentence etc. When we click on a collapse button, a panel will open with large amount of text. </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>
Output
Example
This example shows how to create a collapse using <button> element.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Collapse Example</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.4.1/css/bootstrap.min.css"> </head> <div class="container"> <h2>Simple Collapse</h2> <p>Click on the button to toggle between showing and hiding content.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapse</button> <div id="demo" class="collapse"> A collapse is a bootstrap component which is similar to the dropdown button. Collapse is used to hide or show the content such as paragraph, sentence etc. When we click on a collapse button, a panel will open with large amount of text. </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>
Output
Accordion
An accordion is a card component. We can create the accordion by extending collapse and adding some classes and attributes.
In accordion, the data-parent attribute is used to ensure that only one collapsible element will be visible at a time.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Collapse Example</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.4.1/css/bootstrap.min.css"> </head> <div class="container"> <h2>Accordion</h2> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> A collapse is a bootstrap component which is similar to the dropdown button. Collapse is used to hide or show the content such as paragraph, sentence etc. When we click on a collapse button, a panel will open with large amount of text. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> A collapse is a bootstrap component which is similar to the dropdown button. Collapse is used to hide or show the content such as paragraph, sentence etc. When we click on a collapse button, a panel will open with large amount of text. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Collapsible Group Item #3 </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> A collapse is a bootstrap component which is similar to the dropdown button. Collapse is used to hide or show the content such as paragraph, sentence etc. When we click on a collapse button, a panel will open with large amount of text. </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>
Output
