Searchable Collapsed Content

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:

<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:

1. Removes the hidden attribute
2. Fires a beforematch event (useful for animations or state updates)
3. Scrolls the match into view
4. 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.