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

在上一篇中，使用了 Accordion（手風琴） 來製作主任務列表。接下來，要處理下一層的「子任務與計時紀錄清單」。

在這個區塊中，我選擇直接套用 Collapse（折疊元件） 來達成收納與展開的效果。

1.什麼是 Collapse 元件？

Bootstrap 5 的 Collapse（折疊元件） 是一個專門用來控制內容「顯示（show）」與「隱藏（hide）」的切換工具。它透過 CSS 的 transition 漸變效果，讓內容展開與收合時看起來非常平滑順暢。

範例程式碼

<p>
  <!-- 方式 A：使用 <a> 標籤，透過 href 指定目標 ID -->
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>

  <!-- 方式 B：使用 <button> 標籤，透過 data-bs-target 指定目標 ID -->
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>

<!-- 要被折疊/展開的目標內容 -->
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

關鍵設定要點：

• 觸發按鈕（Trigger）：必須加上 data-bs-toggle="collapse"。

  • 如果是 <button>，透過 data-bs-target="#id" 綁定目標。

  • 如果是 <a> 標籤，可以直接使用 href="#id" 綁定。

• 目標內容（Target）：在容器外層加上 .collapse class，並賦予對應的 id。內部可以自由組合 .card 與 .card-body 樣式，或是任何你自訂的 HTML 結構。

2. 實作套用：子任務計時與備註紀錄

套用 Collapse 後，子任務檢視計時與備註紀錄效果如下：

3.切版思考：為什麼選擇 Collapse 而不是 Accordion？

這裡我會選擇使用 Collapse 而不是 Accordion，主要基於兩個考量：

1. 使用者體驗（UX）：按需查看，避免資訊過載
   在目前手風琴展開的主內容中，已經包含了使用者最常關注的核心資訊：有哪些子任務、子任務狀態、編輯與刪除按鈕，以及累計時間。
   對於「歷次計時與備註」這種細節，使用者不一定每次都需要檢視。預設將其收納，能讓整體介面更加清爽乾淨。

2. 結構與樣式的彈性（CSS/HTML）
   Accordion 的底層本質上就是由 Collapse 構成的。直接使用純粹的 Collapse，可以擺脫手風琴元件預設的包覆外框與樣式，讓我們能更自由地打造出簡潔俐落的子任務清單版面。

總結與預告

透過 Collapse 完成了資訊層級的收納，讓任務清單兼具整體性與細節查閱的彈性。

明天，我們要來使用 Modal元件 來製作「管理主任務」與「新增子任務」的互動彈跳視窗。