Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML hidden until found: let search reveal deferred text

Last updated: 1 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

The hidden=until-found state hides content while allowing browser find-in-page or fragment navigation to reveal it.

Use it in a concrete workflow

A long audit report keeps a technical appendix collapsed from the initial reading path, yet a reviewer searching for a specific sensor model should still reach that text. The heading has an ID for direct navigation. This is a visibility state, not secure storage: the content remains in the delivered document and is available to scripts and anyone reading source. Test browser support and styles; some display rules can prevent the reveal behavior.

html
<main>
  <h1>Inspection I-47</h1>
  <p>The sensor details are available in the technical appendix.</p>
  <section id="sensor-appendix" hidden="until-found">
    <h2>Sensor appendix</h2>
    <p>Model SR-47 was calibrated before the seal check.</p>
  </section>
  <p><a href="#sensor-appendix">Open the sensor appendix</a></p>
</main>

Behavior and ownership

A supporting browser may reveal the section for the fragment or a text match. The state does not create a keyboard-operated disclosure control for every user; use details if manual open and close is the main task.

Performance and maintenance

The hidden text still increases HTML transfer and DOM size. For a very large appendix, a separate document may be cheaper than shipping all content on every report view.

Common Mistakes

  • Do not place confidential text in a hidden section.
  • Do not apply display:none when reveal behavior is required.
  • Do not assume the state replaces an explicit disclosure control.

Connected lessons

html
advanced
Storage details