A fictional equipment handbook has an uncommon reset procedure below its everyday instructions. A support message links directly to #reset-steps. The recipient should reach the actual steps even if that section starts collapsed. Keep a visible Show button as another route, including for browsers that do not implement the automatic reveal.
Keep the content in the document
<a href="#reset-steps">Go to the reset procedure</a>
<button id="show-reset" type="button" aria-controls="reset-panel">
Show reset procedure
</button>
<p id="reset-status" role="status"></p>
<section id="reset-panel" hidden="until-found">
<h2 id="reset-steps">Reset procedure</h2>
<p>Save the current configuration before using the device's reset command.</p>
</section>
The heading is the link target. Its containing section begins in the hidden-until-found state. Put the full real procedure in that section; an empty placeholder that fetches the instructions later gives browser text search no instruction text to find.
Use the HTML standard's hidden states to distinguish this state from ordinary hiding. The content is already in the delivered document. This attribute must not protect restricted instructions or sensitive records.
Update the surrounding interface when the browser reveals it
const panel = document.querySelector('#reset-panel');
const show = document.querySelector('#show-reset');
const status = document.querySelector('#reset-status');
function markShown() {
show.hidden = true;
status.textContent = 'Reset procedure shown.';
}
panel.addEventListener('beforematch', markShown);
show.addEventListener('click', () => {
panel.removeAttribute('hidden');
markShown();
});
beforematch runs before the browser removes the attribute. The handler updates only the surrounding button and status; it does not cancel navigation or fetch replacement content. Clicking Show removes the attribute explicitly, so it does not depend on the automatic reveal path. beforematch event
The snippet deliberately offers one-way expansion. Adding a collapse action introduces decisions about focus, fragment links, and a reader who is currently selecting text inside the procedure. Build that behavior only if the handbook needs it.
Avoid CSS that prevents the reveal
A broad rule such as this defeats the until-found state:
/* Do not use this on until-found sections. */
[hidden] { display: none !important; }
The section needs a layout box for the reveal mechanism. display: none, display: contents, and an inline display can prevent it from being revealed. Leave the section's display and content visibility alone unless you have verified the resulting layout.
If the existing application requires an ordinary-hidden rule, limit it to that state rather than matching every hidden attribute:
[hidden]:not([hidden="until-found"]) {
display: none !important;
}
This handles the lowercase spelling used by the example. Keep generated attribute values consistent with that spelling. An until-found section can still occupy space through its margins, borders, and padding while its contents are hidden, so put decorative framing around it deliberately. The hidden attribute reference describes these layout differences.
Choose a disclosure control when that is the real task
If the reader needs a normal expandable question and answer, native <details> supplies its own disclosure control. Hidden-until-found supplies a reveal state, not a complete accordion or keyboard interaction model. Likewise, inert disables interaction with a region; it does not make hidden instructions searchable.
Do not assume a browser property check proves every search and navigation route works. Test the actual supported browser versions and retain the explicit Show route. Older implementations can treat until-found like ordinary hiding, leaving only the manual action.
Open a fresh copy of the handbook and follow its reset link. Confirm that the heading and procedure become visible and that Show disappears. Repeat on another fresh copy using the browser's Find command with a word inside the procedure, then repeat using Show alone. The support link is useful only if the recipient can read the target instructions without discovering a second navigation trick.