Bootstrap5 folding

Bootstrap5 folding can easily show and hide content.

Example

<button data-bs-toggle="collapse" data-bs-target="#demo">fold</button>

<div id="demo" class="collapse">
Here are some test contents...
</div>

Case analysis

.collapse class is used to specify a collapse element (< div > in the instance); clicking the button switches between hiding and showing.

To control the hiding and display of content, you need to use the <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” >).

Note: <a> you can use the element href property instead of data-bs-target attributes:

Example

<a href="#demo" data-bs-toggle="collapse">fold</a>

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

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.

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>