English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 Collapses can easily realize the display and hiding of content.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2Simple collapse:/h2> <p>Clicking the button will toggle the content between displaying and hiding.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple Collapse</button> <div id="demo" class="collapse"> I pray for you, I dedicate myself to you, We have all had accidental experiences in work and life. We have a small life, I am currently doing an internship that is not suitable for me. </div> </div> </body> </html>Test and See ‹/›
.collapse class is used to specify a collapsible element (e.g., <div>); After clicking the button, it will toggle between hiding and displaying.
To control the hiding and displaying of content, you need to add data on the <a> or <button> element.-toggle="collapse" attribute. data-target="#id" attribute corresponds to the content of the collapse (<div id="demo">).
Attention: <a> You can use the href attribute on the element instead of data-target Properties:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2Simple collapse:/h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapse:/a> <div id="demo" class="collapse"> I pray for you, I dedicate myself to you, We have all had accidental experiences in work and life. We have a small life, I am currently doing an internship that is not suitable for me. </div> </div> </body> </html>Test and See ‹/›
By default, the content of the collapse is hidden. You can add the .show class to make the content display by default:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2Simple collapse:/h2> <p>You can add the .show class to make the content display by default:/p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple Collapse</button> <div id="demo" class="collapse show"> I pray for you, I dedicate myself to you, We have all had accidental experiences in work and life. We have a small life, I am currently doing an internship that is not suitable for me. </div> </div> </body> </html>Test and See ‹/›
The following example shows a simple accordion by extending the card component.
Attention: Use data-The 'parent' attribute ensures that all collapse elements are under the specified parent element, so that when one collapse option is displayed, the others are hidden.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Accordion Example</h2> <p><strong>Attention:</strong>Use the <strong>data-parent</strong>Ensure that all collapse elements are under the specified parent element, so that when one collapse option is displayed, the others are hidden.</p> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Option 1 </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> #1 Content: Basic Tutorial(oldtoolbag.com) -- Learn the basics, and you can go further!!! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Option Two </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> #2 Content: Basic Tutorial(oldtoolbag.com) -- Learn the basics, and you can go further!!! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Option Three </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> #3 Content: Basic Tutorial(oldtoolbag.com) -- Learn the basics, and you can go further!!! </div> </div> </div> </div> </div> </body> </html>Test and See ‹/›