Beyond · Forms and focus

Details and summary

<details> is a disclosure: a block that hides its content until the user opens it. Its first child is a <summary>, the always-visible label, and every other child is shown only while the details is open. The summary carries a marker — ▶ when closed, ▼ when open.

The summary is focusable. Enter or a click toggles the open state and dispatches a toggle event carrying {open}. No script is needed for the open and close itself — the element handles it.

The starting app shows a heading and its options laid out flat, always visible. Fold the options away behind a disclosure.

Your turn

Wrap the two options in a <details>, with the heading as its <summary>:

<details>
    <summary>Settings</summary>
    <div>Verbose logging</div>
    <div>Autosave</div>
</details>

Press Run: the options collapse behind a ▶ Settings line. Tab to it and press Enter (or click it) to expand. Solve shows the finished version; Reset restores the start.