探索實用的詳細資料和摘要元素的運作方式，以及使用位置。
揭露小工具是一種使用者介面控制項，可以隱藏及顯示內容。如果您在 web.dev 上閱讀此內容，且可視區域的寬度低於 106 em，按一下段落上方的「On this page」，即可查看這個部分的目錄內容。如果找不到這個圖示，請縮小瀏覽器，並以揭露小工具的形式顯示這個頁面中的目錄導覽項目。
「摺疊元素」圖形使用者介面是一系列垂直堆疊的揭露小工具。摺疊式使用者介面常見用途是許多網站上的常見問題 (FAQ) 網頁。 「摺疊常見問題常見問題」包含可見的問題清單；按一下問題即可展開，或是「揭露」對於該問題的回答。
jQuery 至少自 2009 年起就加入了摺疊式使用者介面模式。原始不含 JavaScript 的摺疊式解決方案包括：將每個常見問題問題設為 <label>，然後加上有標示的勾號，勾選勾號後顯示 <div> 答案。CSS 看起來會像這樣：
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
為什麼歷史初衷？沒有 JavaScript 或表單控制入侵的揭露小工具等揭露小工具是相對最近的新增項目，自 2020 年 1 月起，只有所有新型瀏覽器都完整支援 <details> 和 <summary> 元素。您現在可以只使用語意 HTML 建立可正常運作，但比使用語意式 HTML 的揭露小工具更缺乏吸引力。您只需要 <details> 和 <summary> 元素即可：這些元素是處理展開和收合內容的內建方式。當使用者按一下或輕觸 <summary>，或在 <summary> 處於焦點時放開 Enter 鍵，畫面上就會顯示父項 <details> 切換鈕的內容！
如同所有語意內容，您可以逐步改善預設功能和外觀。在本例中，我們新增了 一小部分的 CSS
請注意，這些 Codepens 不包含 JavaScript。
切換顯示設定：open 屬性
<details> 元素是揭露小工具容器。<summary> 是其父項 <details> 的摘要或圖例。系統一律會顯示摘要，可做為按鈕顯示，切換父項的其餘內容顯示方式。與 <summary> 互動時，您可以切換 <details> 元素的 open 屬性，藉此切換顯示自行加上標籤的摘要同層級畫面。
open 屬性是布林值屬性。如果有顯示，不論值是否存在，都代表已向使用者顯示所有 <details> 內容。如果沒有 open 屬性，則只會顯示 <summary> 的內容。
由於使用者與控制項互動時，系統會自動新增和移除 open 屬性，因此在 CSS 中可以使用該屬性，根據元素狀態以不同的樣式設定元素樣式。
您可以使用多個 <details> 元素清單建立摺疊元素，每個元素都有 <summary> 子項。在 HTML 中省略 open 屬性表示 <details> 全都會收合或關閉，而且在網頁載入時只會顯示摘要標題；每個標題都是父項 <details> 中其餘內容的開放文字。如果您在 HTML 中加入 open 屬性，<details> 會在網頁載入時展開並顯示內容。
某些瀏覽器只能搜尋收合狀態的隱藏內容，即使收合的內容並非 DOM 的一部分也一樣。如果在 Edge 或 Chrome 中搜尋，系統會展開包含搜尋字詞的詳細資料，並顯示結果。Firefox 或 Safari 不會複製這種行為。
<summary> 必須是 <details> 元素的第一個子項，代表其巢狀結構的父項 <details> 元素中其他內容的摘要、說明文字或圖例。<summary> 元素的內容可以是任何適用於段落中的標題內容、純文字或 HTML。
切換摘要標記
在兩個先前的 Codepens 中，您會注意到摘要中 inline-start 的箭頭。揭露事項通常會在螢幕上使用一個小三角形旋轉 (或扭轉)，表示已開啟/關閉狀態，並在三角形旁顯示標籤。<summary> 元素的內容會為揭露小工具加上標籤。每個區段頂端的旋轉箭頭都是針對 <summary> 元素設定的 ::marker。與清單項目一樣，<summary> 元素支援 list-style 快速屬性及其長屬性，包括 list-style-type。您可以透過 CSS 設定揭露聲明三角形樣式，包括將三角形使用的標記變更為其他項目符號類型，包括採用 list-style-image 的圖片。
如要套用其他樣式，請使用與 details summary::marker 類似的選取器。::marker 虛擬元素只接受部分樣式。移除 ::marker 並替換為較簡單的 ::before 是常見的做法，而 CSS 樣式會根據開放屬性的顯示情況 (或缺少) 稍微變更產生內容的樣式。如要移除揭露小工具圖示，您可以設定 list-style: none，或將標記的內容設為 none，但請一律加入視覺指標，告知使用者摘要內容是啟用時顯示及隱藏內容的切換鈕。
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
本範例會移除預設標記，並新增產生的內容，在詳細資料關閉時建立 +，並在詳細資料開啟時建立 -。
如果想將詳細資料區塊預設為開啟，請在 <details> 開頭標記中加入 open 屬性。您也可以在每個對話方塊之間加入空格，並為含有產生的內容建立的標記轉換旋轉，藉此改善外觀：
錯誤的處理方式
如果您沒有加入 <summary>，瀏覽器會為您建立一個：有標記和「details」字樣。這項摘要屬於「陰影根」的一部分，因此不會套用作者 CSS 摘要樣式。遺憾的是，Safari 不會在鍵盤焦點順序中加入詳細資料。
如果您加入 <summary>，但不是 <details> 中的第一個元素，瀏覽器仍會照常顯示摘要。此外，如果您在摘要中加入連結、標籤或其他互動式元素，這項做法也不會失敗，但瀏覽器對互動式內容的處理方式不同。舉例來說，如果您在摘要中加入連結，部分瀏覽器會同時新增摘要和預設分頁順序連結，但其他瀏覽器預設不會聚焦於該連結。如果按一下 <summary> 中的巢狀 <label>，部分瀏覽器會將焦點放在相關聯的表單控制項；其他瀏覽器則會將焦點移至表單控制項，並將 <details> 切換為開啟或關閉。
HTMLDetailsElement 介面
和所有 HTML 元素一樣，HTMLDetailsElement 繼承了 HTMLElement 的所有屬性、方法和事件，並新增 open 執行個體屬性和 toggle 事件。HTMLDetailsElement.open 屬性是反映 open HTML 屬性的布林值，用來指出是否要向使用者顯示元素的內容 (不含 <summary>)。當 <details> 元素開啟或關閉時，就會觸發切換事件。您可以使用 addEventListener() 監聽這個事件。
如要編寫指令碼，在使用者開啟其他詳細資料時關閉已開啟的詳細資料，請使用 removeAttribute("open") 移除開啟的屬性：
這是唯一使用 JavaScript 的範例。除了關閉其他開啟揭露小工具的功能以外，您可能不需要 JavaScript。
提醒您，<details> 和 <summary> 的樣式設定非常大，甚至還能用來建立工具提示。不過，如果您要將這些語意元素用於原生語意不相符的用途，請務必維持無障礙功能。大部分的網頁都有預設可存取的 HTML。我們身為開發人員的職責是確保內容不會被使用者存取。
隨堂測驗
測驗您對詳細資料和摘要的瞭解程度。
<summary> 必須是哪個元素的第一個子項？
<p><details><fieldset>