收合式內容區段 (有時稱為「Accordion」) 是常見的 UI 模式。不過，如果內容隱藏在摺疊區域中，就無法透過「在頁面中搜尋」功能搜尋。此外，您也無法連結至收合區域內的文字片段。
hidden=until-found HTML 屬性和 beforematch 事件可解決這些問題。只要在隱藏內容的容器中加入 hidden=until-found，瀏覽器就能在該隱藏區域中搜尋文字，並在找到相符項目時顯示該區段。
這些功能可在 Chrome 102 以上版本使用，讓我們一起來瞭解這些功能的運作方式。
使用方式
如果網站已有可折疊的部分，而您想讓這些部分可供搜尋，請將隱藏該部分的樣式替換為 hidden=until-found 屬性。如果您的網頁還有其他狀態需要與顯示/隱藏區段的狀態保持同步，請新增 beforematch 事件事件監聽器，在瀏覽器顯示該元素之前，在 hidden=until-found 元素上觸發事件。
注意事項
為提供一致的使用者體驗，hidden=until-found 內容應可在未使用頁面內搜尋功能的情況下顯示。並非所有使用者都會使用「在頁面中尋找」功能，且不支援 hidden=until-found 的瀏覽器會獲得隱藏內容的原始體驗，而不會透過「在頁面中尋找」功能顯示內容。
如要確保隱藏內容可在不支援 hidden=until-found 的瀏覽器中搜尋，您可以隨時在這些瀏覽器中展開隱藏內容。您可以檢查 beforematch 事件處理常式是否存在，藉此執行功能偵測：
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found 會套用 content-visibility:hidden CSS 屬性，而非一般隱藏屬性套用的 display:none 屬性。這項功能可在內容關閉時搜尋內容，但也會產生以下副作用：
- 部分版面配置 API (例如
getBoundingClientRect) 會回報hidden=until-found元素內的隱藏內容會佔用空間，並在頁面中佔有位置。 hidden=until-found元素的子節點不會算繪，但hidden=until-found元素本身仍會顯示方塊。也就是說，邊框和明確大小等 CSS 屬性仍會影響算繪作業。
以下範例會在套用 hidden=until-found 的元素中加入邊距、邊框和邊框間距。在隱藏內容顯示的位置，會出現一個灰色邊框的方塊，當隱藏內容顯示時，這個方塊會填入隱藏內容。這是隱藏元素的方塊。
為避免這個問題，請在包含 hidden=until-found 的容器內嵌元素中加入邊框。