HTML Hidden Until Found

The HTML hidden="until-found" value lets you collapse content without removing it from browser search and fragment navigation. When a visitor uses Find in Page or follows a matching URL fragment, a supporting browser reveals the hidden section and scrolls to it.

This feature is useful for long reference pages, help sections, archived information, and documentation where content should remain searchable even when it is initially collapsed.

Browser support: As of August 2026, hidden-until-found behavior still has limited browser support. Use it as an enhancement and provide a clear fallback for other browsers.

How Hidden Until Found Works

The regular hidden state removes content from visual rendering. The until-found state hides the content but allows the browser to discover it through Find in Page or a URL fragment.

Attribute Initial display Find in Page Fragment navigation
hidden Hidden Not revealed Not revealed
hidden="until-found" Hidden Can be revealed Can be revealed
No hidden attribute Visible Available Available

When a browser finds matching content inside the hidden section, it follows this sequence:

  1. It fires the beforematch event on the hidden element.
  2. It removes the hidden attribute.
  3. It scrolls to the revealed content.

Add Searchable Collapsed Content

Place hidden="until-found" on the element that contains the searchable content. Give the element an id if visitors should also be able to open it through a link.

Example:

<a href="#shipping-policy">Read the shipping policy</a>

<section id="shipping-policy" hidden="until-found">
  <h2>Shipping Policy</h2>
  <p>Orders usually leave the warehouse within two business days.</p>
</section>

Selecting the link navigates to #shipping-policy. A supporting browser removes the hidden state and shows the section.

Use the beforematch Event

The beforematch event runs just before the browser reveals the element. You can use it to update nearby controls, record an analytics event, or prepare content that is already available in the document.

Example:

const policy = document.querySelector("#shipping-policy");

// Update the page before the hidden section becomes visible.
policy.addEventListener("beforematch", () => {
  document.querySelector("#status").textContent =
    "The shipping policy has been opened.";
});

Do not depend on beforematch to fetch essential information. The searchable text must already exist in the document, or the browser cannot find it.

Complete Runnable Example

This example combines fragment navigation, searchable content, and the beforematch event.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hidden Until Found Example</title>
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; }
    section { margin: 1rem 0; padding: 1rem; border: 1px solid #888; }
  </style>
</head>
<body>
  <h1>Employee Handbook</h1>
  <p><a href="#leave-policy">Open the leave policy</a></p>

  <section id="leave-policy" hidden="until-found">
    <h2>Leave Policy</h2>
    <p>Employees receive 20 paid leave days each year.</p>
  </section>

  <script>
    const policy = document.querySelector("#leave-policy");

    // Runs immediately before the browser reveals the section.
    policy.addEventListener("beforematch", () => {
      console.log("The leave policy is about to be revealed.");
    });
  </script>
</body>
</html>

Understand the Layout Behavior

Browsers generally implement hidden-until-found with behavior similar to content-visibility: hidden. The element can still generate a layout box, so its margin, border, padding, and background may occupy space even while its contents are hidden.

The element must participate in layout containment to be revealed. Avoid applying these display values to the hidden element:

  • display: none
  • display: contents
  • display: inline

Example:

/* A block layout allows the browser to reveal the section. */
[hidden="until-found"] {
  display: block;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px dashed #777;
}

Provide a Compatible Fallback

Because support is not universal, use a native <details> element when every visitor must be able to expand the content manually. The disclosure remains keyboard accessible and works without JavaScript.

Example:

<details>
  <summary>Delivery information</summary>
  <p>Standard delivery takes three to five business days.</p>
</details>

You can also offer a visible button that removes the attribute. This provides manual access in browsers that recognize the hidden state but do not reveal it through search.

Example:

const button = document.querySelector("#show-policy");
const section = document.querySelector("#shipping-policy");

// Let the visitor reveal the section manually.
button.addEventListener("click", () => {
  section.removeAttribute("hidden");
  section.focus();
});

Accessibility and Best Practices

  • Use the feature only for secondary content. Keep critical instructions visible.
  • Add clear headings so visitors understand what was revealed.
  • Provide a visible fallback when browser support matters.
  • Do not use aria-hidden="true" on searchable content because it removes the content from the accessibility tree.
  • Test fragment links, keyboard navigation, Find in Page, and screen-reader behavior.

Conclusion

The hidden="until-found" value keeps optional content searchable while reducing initial page clutter. It works well for reference material and long documentation, but its limited support means you should pair it with a reliable disclosure or manual reveal option.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram