Organise a page with tabs and collapsible sections

A long page can ask less of its reader in two ways. Tabs put alternatives side by side, so a reader sees the one they want: the same computation in two notations, a program in two languages. A collapsible section folds detail behind one line, so a reader opens it only if they need it: a long derivation, background a specialist already knows. Both keep everything on the page, for search, for print and for a reader without scripts.

Show alternatives in tabs

Open the group with a line of five colons and tabs: :::::tabs.
Open each alternative with four colons, tab and its label: ::::tab{name="By induction"}. Write its content and close it with ::::.
Close the group with five colons.

Result

By induction

For $n = 1$ both sides are $1$ . If $\sum_{k = 1}^{n} k = \frac{n ( n + 1 )}{2}$ , adding $n + 1$ gives $\frac{( n + 1 ) ( n + 2 )}{2}$ .

By pairing

Write the sum forwards and backwards and add: each of the $n$ columns sums to $n + 1$ , so twice the sum is $n (n + 1)$ .

Markdown

:::::tabs
::::tab{name="By induction"}
For $n = 1$ both sides are $1$. If $\sum_{k=1}^{n} k = \tfrac{n(n+1)}{2}$, adding
$n + 1$ gives $\tfrac{(n+1)(n+2)}{2}$.
::::
::::tab{name="By pairing"}
Write the sum forwards and backwards and add: each of the $n$ columns sums to
$n + 1$, so twice the sum is $n(n+1)$.
::::
:::::

The reader sees one tab at a time and switches with a click or the arrow keys. The colon counts follow the nesting rule: the group needs more colons than its tabs, and a tab more than any block inside it. A tab body is full Markdown, so it can hold displays, code, a statement or a figure; if a tab holds a three-colon block of its own, the counts above already leave room for it.

Keep labels short and parallel, since they sit side by side: Python and Julia, By induction and By pairing.

Keep several tab groups in step

When a page has several groups with the same alternatives, such as the same two languages in every code example, a reader who picks one wants it everywhere.

Give every such group the same group name on its opening line: :::::tabs{group="lang"}.
Use exactly the same tab labels in each group.

Result

Python

xs = [1, 2, 3]

Julia

xs = [1, 2, 3]

Python

print(sum(xs))

Julia

println(sum(xs))

Markdown

:::::tabs{group="lang"}
::::tab{name="Python"}
```python
xs = [1, 2, 3]
```
::::
::::tab{name="Julia"}
```julia
xs = [1, 2, 3]
```
::::
:::::
 
:::::tabs{group="lang"}
::::tab{name="Python"}
```python
print(sum(xs))
```
::::
::::tab{name="Julia"}
```julia
println(sum(xs))
```
::::
:::::

Choosing Julia in one group switches every group named lang to Julia, and the reader's browser remembers the choice for the next page that uses the same group name. A group name is letters, digits, - and _, up to 40 characters; anything else is ignored and the group switches on its own.

Fold detail behind a click

Open the section with four colons, spoiler, and in square brackets the line the reader sees while it is closed: ::::spoiler[Show the computation].
Write the hidden content.
Close it with four colons.

Result

The integral equals $e - 1$ .

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

The integral equals $e - 1$.
 
::::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.
$$
::::

Write the label as what the reader gets by opening it: Show the computation, Proof of the lower bound, Why this works. Always give one: without it the section is titled Details, in English, whatever the language of the document. Four colons leave room for a block inside, such as a TikZ diagram or a table in an admonition.

Choose the right block

A problem's hint or solution is a :::hint or a :::solution inside the :::problem. They fold the same way, and they also carry a translated label and belong to the problem. See Set a problem with a hint and a solution.
Two ways to do the same thing are tabs. More detail on one way is a collapsible section.
Something the argument depends on stays open. A reader who skips a folded section must still be able to follow the text.
Something only some readers may see belongs in a work with a narrower visibility, not behind a click: folded text is in the page, and anyone can open it.

The result

In the preview, a tab group shows a row of labels above the first tab's content, and clicking a label shows that tab instead. A collapsible section shows its label with a marker and opens on a click, or with Enter or Space from the keyboard. On a printed page, or wherever scripts do not run, the tabs appear one under another, each under its label, and the collapsible sections work as before, since they are the browser's own disclosure element. Chrome and Edge open a folded section when find-in-page matches text inside it.