00:00
00:00
Design
@burcs
@burcsSearchable Collapsed Content
Browser find-in-page reveals collapsed sections automatically using hidden='until-found'
The
hidden="until-found" HTML attribute makes collapsed content searchable with browser find-in-page (Cmd+F / Ctrl+F). When users search for text hidden inside a collapsed section, the browser automatically reveals that section and scrolls to the match.Why It Matters
Traditional collapsed sections using
display: none or hidden prevent browser search from finding content. Users must manually expand every section to find what they're looking for—a frustrating experience that defeats the purpose of find-in-page.With
hidden="until-found", the content remains visually hidden but searchable. The browser detects matches, expands the section, and highlights the result—just like users expect.How It Works
Replace standard hiding methods with the
hidden="until-found" attribute on collapsible content:html
<details>
<summary>Section Title</summary>
<div hidden="until-found">
Content that can be found with Cmd+F
</div>
</details>When the browser finds a match inside the hidden element, it:
- Removes the
hiddenattribute - Fires a
beforematchevent (useful for animations or state updates) - Scrolls the match into view
- Highlights the matching text
This creates a seamless experience where find-in-page "just works" regardless of the UI state.
Browser Support
The
hidden="until-found" attribute is supported in Chromium-based browsers (Chrome, Edge, Arc) starting from version 102. It gracefully degrades in unsupported browsers—content remains hidden but won't be searchable via find-in-page.
