Expand

The :expand directive creates a collapsible section. Use it when you want to let users reveal one or more sections at a time. This is also the directive to use for a "spoiler" or hidden-answer style reveal - there is no separate spoiler directive. Expandable sections are collapsed by default. Available as leaf and container.

Properties: header (string, heading above the content), defaultExpanded (boolean, default false), variant (default | container, default default).

Rendered:

Source:

1
::expand[Answer: 42]{header="Question: What is the meaning of life?"}

Rendered:

1
console.log('Allo!');

Source:

1
2
3
4
5
::::expand{header="A simple log in JavaScript" defaultExpanded=true}
```javascript
console.log('Allo!');
```
::::

Rendered:

Source:

1
2
3
4
5
:::expand{header="Show configuration details" variant="container"}
This variant renders the collapsible section inside a bordered container.

::alert[You can nest other directives inside an expand.]{type="info"}
:::