HTML摺疊內容不用外掛：details與summary怎麼用？

內容目錄

頁面上的補充說明越寫越長，卻不是每位讀者都需要看完。若只是讓人自行展開網站使用方式、準備資料或技術細節，可以先用HTML的details與summary，不必為這個小功能另外裝外掛。

但摺疊不是把頁面「變短」的萬能辦法。費用、使用條件、重要警告等讀者必須知道的資訊，應保持可見；適合收起來的是補充內容。

先有一個清楚的展開入口

summary放在details裡，作為讀者看到的標籤；其餘內容放在後面。下面用「需要準備什麼？」示範一段補充說明，不需要JavaScript：

<details>
  <summary>需要準備什麼？</summary>
  <p>準備頁面文字與圖片草稿，再整理需要補充的資料。</p>
</details>

標籤要說明展開後會得到什麼。「需要準備什麼？」比「更多」容易判斷。也不要為了版面乾淨，把原本的展開標記與鍵盤焦點全部拿掉。

想讓內容一開始就顯示，可以寫<details open>。open是布林屬性，是否存在才是重點：open="false"仍會展開，不能用這種寫法關閉。要預設關閉，就移除open。

網站可以用同樣方式收起「使用前要準備哪些資料？」等補充說明。圖中的「需要準備什麼？」展開後，其他問題仍保持原來的狀態。若只是各自開合，先維持這個簡單做法，不必急著加入只能開一項的行為。

修改後，先按Tab找到每個問題，確認焦點清楚可見，再試空白鍵開合，並確認內容能正常讀到。手機上也要看長標籤是否換行、展開後會不會超出畫面。

把元件放回自己的網站後，還要連同主題樣式、其他腳本與實際使用方式一起檢查。不要只因為滑鼠點得開，就認定所有使用方式都沒問題。

保留一份修改前HTML，先在自己的測試頁加入元件。發現標籤看不懂、焦點消失或必要資訊被藏起來，就先恢復原本直接顯示的內容，再調整設計。

資料查核：2026年10月2日。