🐥 新手開發日記
本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主，如果發現內容較為簡單，(沒錯！你是對的xD！)還請多多包涵。

完成了側邊選單與 SPA 頁面切換骨架後，接下來我們先來製作 常見 QA 區域。這裡要使用的元件是 Bootstrap 5 的 Accordion（手風琴）。

相信大家對於這個元件並不陌生，在許多網站的 FAQ 頁面中經常能看到它的身影，非常適合用來收納大量的問答內容。

1.認識 Accordion 元件結構

Bootstrap 的 Accordion 主要由外層的 .accordion 容器與多個 .accordion-item 組成。每一個 .accordion-item 內部又分為標題（Header）與內容（Body）：

• .accordion-header：手風琴的標題區塊，裡面包含觸發展開/收合的 <button>。

• .accordion-body：展開後顯示的詳細解答內容。

官方基礎範例程式碼如下：

<div class="accordion" id="accordionExample">
  <!-- 第一項 QA -->
  <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">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.
      </div>
    </div>
  </div>

  <!-- 第二項 QA -->
  <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">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
      </div>
    </div>
  </div>

  <!-- 第三項 QA -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
      </div>
    </div>
  </div>
</div>

注意點：在修改或新增項目時，務必確保按鈕上的 data-bs-target="#id" 與內容容器的 id="..." 完全對應一致，否則點擊時會展開錯誤的區塊或完全無反應。

Always Open 🎶 模式

預設情況下，展開某一項 QA 時，其他已展開的項目會自動收合（因為有設定 data-bs-parent="#accordionExample"）。

如果希望使用者點擊新選項時，原本展開的內容不會自動關閉，只要移除子項目的 data-bs-parent 屬性即可（可參考官方文件中的 Always open 範例）。

(參考資料：Bootstrap 5 components-Accordion)

2. 整合進常見 QA tab-pane

我們將複製好的 Accordion 程式碼貼入上一篇寫好的常見 QA .tab-pane 容器中。
當點擊左側選單的「常見 QA」按鈕時，右邊就會順利呈現手風琴內容了！

因為官方範例預設第一個項目是展開狀態（帶有 .show 與未帶 .collapsed），但我的設計稿希望初始狀態全部都是預設合起的，因此需要手動調整第一個項目：

1. 將第一個按鈕的 class 加上 .collapsed。

2. 將第一個內容區容器的 class 拿掉 .show。

再將文字與問答替換成設計稿內容後，常見 QA 區塊就完成了。

套用 Shadows 通用類別

為了讓畫面看起來不那麼平淡，我打算為左側的 List Group 與右側的 Accordion 加上一點微微的陰影，提升介面的視覺層次感。

Bootstrap 5 提供了非常方便的 Shadows Utilities 通用類別，主要分為三種尺寸：

• .shadow-sm：小陰影（適合卡片、按鈕或微小元素）

• .shadow：標準預設陰影

• .shadow-lg：大陰影（適合 Modal 彈窗或懸浮提示）

只要在元件最外層的 class 中加入 shadow-sm 即可輕鬆完成套用：

套用後的效果

(參考資料：Bootstrap 5 utilities-shadows)