Details (:::details)

The :::details directive creates a collapsible section with a summary/title that users can click to expand or collapse.

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

Syntax

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.

important

The summary is required. An error will be logged if you don't provide a summary in square brackets.

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.