bootstrap5 手風琴的使用

父盒子：

類名：accordion
id：accordionExample
子項目的摺疊盒子的 data-bs-parent 需要與父盒子id一致

子項目：

類名：accordion-item

子項目頭部：

類名：accordion-header
id：headingOne
子項目內容盒子的 aria-labelledby 需要與頭部id一致
按鈕的類名：accordion-button
按鈕的屬性：
data-bs-toggle="collapse"切換
data-bs-target="#collapseOne"
aria-expanded="true"默認是否展開
aria-controls="collapseOne"

子項目body

類名：accordion-body

省略這個屬性，展開後需要手動關閉data-bs-parent

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