Home

A Quarto extension for creating collapsible sections using <details> and <summary> HTML elements without writing raw HTML.

Installation

To install the details Quarto extension, follow these steps:

1. Open your terminal.
2. Execute the following command:

quarto add coatless-quarto/details

This command will download and install the Quarto extension under the _extensions subdirectory of your Quarto project. If you are using version control, ensure that you include this directory in your repository.

Usage

Syntax with attribute

Use the .details class and specify the summary text with the summary attribute:

::: {.details summary="Click to see more"}
This content will be collapsible.

You can include **any** Markdown content here.
:::

Click to see more

This content will be collapsible.

You can include any Markdown content here.

Syntax with heading as summary

Use any heading level as the summary text. The heading will be automatically extracted:

::: {.details}
## Click to expand

This is the collapsible content that appears after the heading.

You can use any heading level: `##`, `###`, `####`, etc.
:::

Click to expand

This is the collapsible content that appears after the heading.

You can use any heading level: ##, ###, ####, etc.

Syntax with nested summary div

For multi-line or complex summaries, use a nested .summary div:

::: {.details}
::: {.summary}
**Important:** Click to expand
:::

This is the collapsible content.

- Item 1
- Item 2
:::

Important: Click to expand

This is the collapsible content.

• Item 1
• Item 2

Priority order

If multiple summary methods are used, the priority is:

1. Attribute (summary="text") - highest priority
2. Summary div (::: {.summary})
3. First heading (##, ###, etc.)
4. Default (“Click to expand”)

Example where attribute takes priority:

::: {.details summary="This will be used"}
## This heading will be treated as content

Content here.
:::

Gives:

This will be used

This heading will be treated as content

Content here.

Open by default

Add the open="true" attribute to make the details open by default:

::: {.details summary="Already expanded" open="true"}
This content is visible by default.
:::

Gives:

Already expanded

This content is visible by default.