Use of bootstrap5 accordion

Parent box:

Class name: accordion
id：accordionExample
The data-bs-parent of the sub-project's folding box needs to be consistent with the parent box id.

Sub-projects:

Class name: accordion-item

Subproject header:

Class name: accordion-header
id：headingOne
The aria-labelledby of the sub-project content box needs to be consistent with the head id
Button class name: accordion-button
Button properties:
data-bs-toggle="collapse"toggle
data-bs-target="#collapseOne"
aria-expanded="true" Whether to expand by default
aria-controls="collapseOne"

Subproject body

Class name: accordion-body

Omit this attribute, you need to manually close data-bs-parent after expansion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        标题 #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        内容
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        标题 #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        内容
      </div>
    </div>
  </div>
</div>