skip to content
Michael Kitzman
Sr. Frontend Engineer

HTML: hidden until-found

/ 1 min read

css, dev, a11y

The Problem

Accordions are a popular web design pattern, allowing users to expand and collapse content on demand. When collapsed, browsers usually employ “display: none” to hide the content, which removes it from the page layout flow and renders it unsearchable.

<div class="section collapsed">
  <h2 class="title">Trigger Row</h1>
    <div class="details">
        Content that can't be searched.
    </div>
</div>

Solution

Add hidden=until-found to the container so the browser can search text and reveal the section if the text is found.

<div class="section collapsed">
  <h2 class="title">Trigger Row</h1>
    <div hidden="until-found" class="details">
        Searchable content
    </div>
</div>

Considerations

  • Layout APIs like getBoundingClientRect may report the hidden content in the size even when hidden.
  • Users should still be able to see the content without the use of find-in-page
  • Child elements won’t be rendered but the container will still be a box so border and size can effect it.
  • The beforematch event that is fired when the hidden until found content is about to be shown is still in experimental mode and not currently (Nov/24) supported by Safari and Firefox.