<a href="#demo" data-bs-toggle="collapse">folda>
<div id="demo" class="collapse">
Here are some test contents...
div>
Collapsed content is hidden by default, and you can add .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>
The following example shows a simple accordion by extending the card component.
Note: use th 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>
