Bootstrap5 folding can easily show and hide content. Case analysis To control the hiding and display of content, you need to use the Note: Collapsed content is hidden by default, and you can add The following example shows a simple accordion by extending the card component. Note: use th 7.20.1. Example ¶
<button data-bs-toggle="collapse" data-bs-target="#demo">fold</button>
<div id="demo" class="collapse">
Here are some test contents...
</div>
.collapse
class is used to specify a collapse element (< div > in the instance); clicking the button switches between hiding and showing.
<a>
or
<button>
add on the element
data-bs-toggle="collapse"
property.
data-target="#id"
the property is the corresponding collapsed content (< div id= “demo” >).
<a>
you can use the element
href
property instead of
data-bs-target
attributes: 7.20.2. Example ¶
<a href="#demo" data-bs-toggle="collapse">fold</a>
<div id="demo" class="collapse">
Here are some test contents...
</div>
.show
class to make the content display by default: 7.20.3. Example ¶
<div id="demo" class="collapse show">
Here are some test contents...
</div>
data-bs-parent
property to ensure that all collapsed elements are under the specified parent element, so that other options are hidden when one collapse option is displayed. 7.20.4. Example ¶
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
Option 1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
#1 Content: Rookie Tutorial - Learning not only skills, but also dreams！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
Option 2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
#2 Content: Rookie Tutorial - Learning not only skills, but also dreams！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
Option 3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
#3 Content: Rookie Tutorial - Learning not only skills, but also dreams！！！
</div>
</div>
</div>
</div>