You write the question as the summary and the answer as the body. It is a plain details box, so it works with JavaScript off. Use it for explanation — a sem-fact is for claims.
A question the reader clicks to reveal the answer.
You write the question as the summary and the answer as the body. It is a plain details box, so it works with JavaScript off. Use it for explanation — a sem-fact is for claims.
optional label for the closed state. Default: the leading body text (max 60 chars, cut at the last word boundary, trailing punctuation dropped) acts as summary when absent.boolean attr — starts **revealed** (no control; the body is live immediately; the host carries `data-revealed`).boolean attr — accepted, no-op. Hidden is the default.per the global attribute catalog (conventions.md §2)per the global attribute catalog (conventions.md §2)per the global attribute catalog (conventions.md §2)
Live render boots with JavaScript — the authored source is alongside.
variant: starts open
No `collapsed` authored: the reveal starts open — the answer shows, the summary bar reads as its heading. State is the native `<details>` attribute the runtime presets; there is no script-maintained open flag to drift.
variant: starts open
sem-reveal-default-open.html
source
1<sem-reveal summary="What wraps the reveal itself?">
Live render boots with JavaScript — the authored source is alongside.
variant: derived summary
No `summary` attribute: `src/shared/summary.ts` derives the closed-state label from the leading body text (max 60 chars, cut at the last word boundary) — the summary a reader sees is the summary a machine extracts, one shared rule. JS-off with no `summary` there is no caption at all: plain prose, nothing hidden.