Details (:::details)

↑ Docs content model

The :::details directive creates a collapsible section with a clickable summary that users can expand or collapse.

When to use

Use :::details to hide long or secondary content behind a clickable summary — sample output, an optional deep dive, or a large code block that would otherwise break the flow of a procedure. Don't hide information a reader needs to complete the main task.

Technical details

:::details is similar to the HTML <details> and <summary> elements, as documented in Docusaurus Markdown Features.

Markdown

:::details[Summary text]

Content goes here. Supports **bold**, _italic_, code blocks, and other Markdown.

:::

The text in square brackets [Summary text] becomes the clickable summary. The summary supports rich Markdown formatting like bold, italic, and code. The body supports arbitrary Markdown, including code blocks and links.

Rules

• The summary is required. An error is logged if you don't provide a summary in square brackets.
• Close the directive with a ::: fence.

Style

• Write the summary so a reader can decide whether to expand it without doing so; label what's inside.

Template

Markdown

:::details[Summary text]

Hidden content.

:::

Examples

Basic usage

Example:

Markdown

:::details[Click to expand]

This is the detailed content that was hidden until you clicked.

:::

Output:

Click to expand

This is the detailed content that was hidden until you clicked.

With rich Markdown content

Example:

Markdown

:::details[**Toggle me!** Notice how I can `code` here]

This is the detailed content.

```js
console.log('Markdown features including code blocks are available');
```

You can use Markdown here including **bold** and _italic_ text, and [inline links](https://example.com).

:::

Output:

Toggle me! Notice how I can code here

This is the detailed content.

JavaScript

console.log('Markdown features including code blocks are available');

You can use Markdown here including bold and italic text, and inline links.

Used in

Content atoms appear in any page section. Collapsible details are common in Procedure and Additional resources for optional or supplementary content.