<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>