Finding Hidden Content With hidden="until-found"

Ordinary hidden removes content from display and browser search. That is awkward for long reference pages where a section should start collapsed but still appear in Find in Page.

hidden="until-found" is designed for that case.

The browser can reveal a matching section

<section hidden="until-found">
  Hidden content that browser search can reveal.
</section>

In supporting browsers, a text match or fragment target reveals the element. Normal hidden does not:

<section hidden>
  Browser search cannot reveal this content.
</section>

The MDN hidden attribute reference explains the current behaviour and support.

Listen before the reveal when necessary

The browser fires beforematch before removing the hidden state:

section.addEventListener("beforematch", () => {
  console.log("The section is about to be revealed");
});

That event can synchronise another control or prepare surrounding UI. See the beforematch reference for details.

This is not the same component as <details>. A disclosure gives the user a visible summary to open and close. until-found is useful when discovery comes from search or a fragment link.

Do not override it with display: none; the browser needs the element to participate in its special hidden-until-found layout behaviour. Treat the feature as progressive enhancement because browser support can vary.

I would use it for collapsed documentation or reference sections, not to conceal critical page content. The nice part is narrow: hidden information can remain searchable without a custom script managing Find in Page.

← Back to all articles