Collapsible sections

Hide a solution, a long derivation or optional detail behind a click with :::spoiler, and when to use :::solution or :::hint instead

A collapsible section shows one summary line and keeps its body folded until the reader opens it. It lets a reader choose: try the exercise before seeing the answer, skip a long computation they trust, or open the detail when they need it. The page stays short without losing anything.

Syntax

Result

Show the computation

Substitute $u = x^{2}$ , so $d u = 2 x d x$ :

\int_{0}^{1} 2 x e^{x^{2}} d x = \int_{0}^{1} e^{u} d u = e - 1

Markdown

::::spoiler[Show the computation]
Substitute $u = x^2$, so $du = 2x\,dx$:
 
$$
\int_0^1 2x e^{x^2} \, dx = \int_0^1 e^{u} \, du = e - 1
$$
::::

The [label] is the summary line, always visible. Write it as what the reader gets by opening it: "Show the computation", "Proof of the lower bound", "Why this works". Without a label it reads Details, in English whatever the document's language, so give one.
The body is full Markdown: paragraphs, maths, lists, code, images, and other blocks.
Four colons in the example rather than three: the body could hold a block of its own (a TikZ diagram, a table inside a callout), and the outer fence needs more colons than anything inside it. See nesting.

Solutions and hints: use the statement kinds

For a problem and its answer, prefer the dedicated statement kinds to a spoiler. :::solution and :::hint are collapsible too, and they also carry a translated label ("Solution", "Решение", "Lösung", ...) and belong to the problem above them:

Result

Problem. Show that $2$ is irrational.

Hint.

Suppose $2 = p / q$ in lowest terms and look at the parity of $p$ .

Solution.

From $p^{2} = 2 q^{2}$ , $p$ is even; write $p = 2 r$ . Then $q^{2} = 2 r^{2}$ , so $q$ is even as well – contradicting lowest terms.

Markdown

:::problem
Show that $\sqrt{2}$ is irrational.
:::
 
:::hint
Suppose $\sqrt{2} = p/q$ in lowest terms and look at the parity of $p$.
:::
 
:::solution
From $p^2 = 2q^2$, $p$ is even; write $p = 2r$. Then $q^2 = 2r^2$, so $q$ is
even as well -- contradicting lowest terms.
:::

Use a plain spoiler for everything else that is optional: a long derivation, the code behind a figure, a table of raw data, background a specialist already knows.

What folding does and does not do

It works without scripts. A spoiler is the browser's own disclosure element (<details>), so it opens with a click, with Enter or Space from the keyboard, and in a page read with JavaScript off. A screen reader announces it as collapsed or expanded.
The browser's find-in-page searches inside it. Chrome and Edge open the section that holds the match; in other browsers, open it first.
Folded text is still on the page. Search engines index it, and anyone can open it. Do not fold anything the text depends on: if a reader must see it to follow the argument, leave it open.
It is not a way to hide content. A spoiler is not access control. Text that only some readers may see belongs in a publication with a narrower visibility, not behind a click.

Raw HTML

Writing <details><summary>...</summary>...</details> in the body produces the same element and is allowed. The directive is the better form: it is shorter, the body is Markdown rather than HTML, and the editor shows it as a block you can edit.