Details

The details shortcode displays an expandable/collapsible section of text.

Expand me…

Thank you!

Usage

​
> [!details]- Expand me...
> Thank you!
{{< details summary="Expand me..." >}}
Thank you!
{{< /details >}}
{{ partial "shortcodes/details.html" (dict
  "page" .
  "content" "Thank you!"
  "summary" "Expand me..."
)}}

This shortcode is fully compatible with Hugo’s details shortcode but offers some extensions.

Markdown callout syntax is available in other Markdown parsers like Obsidian and therefore is the recommended syntax for generating portable Markdown.

In Markdown syntax the section is a callout of the style details. Its first line takes summary and open, while name and title are written as the Markdown attributes groupid and hint. class and raw are not available.

The callout shortcode is also capable of displaying expandable/collapsible sections of text but with additional parameters for color and additional icons.

Parameters

Name Default Notes
summary "Details" Arbitrary text to appear next to the expand/collapse icon.
open false How the content is displayed.

- true: the content is initially shown
- false: the content is initially hidden
name <empty> Arbitrary name of the group the section belongs to.

Of all sections with the same name, at most one is open at any given time.
class <empty> CSS classes to be added to the section.
title <empty> Arbitrary text to be displayed as a tooltip for the summary.
raw false Extension. How the content is processed.

- false: the content is rendered as Markdown
- true: the content is written as it is, see below
<content> <empty> Arbitrary text to be displayed on expand.

Examples

All Defaults

​
> [!details]- Details
> Yes, you did it!
{{< details >}}
Yes, you did it!
{{< /details >}}
{{ partial "shortcodes/details.html" (dict
  "page" .
  "content" "Yes, you did it!"
)}}
Details

Yes, you did it!

Initially Expanded

​
> [!details]+ Expand me...
> No need to press you!
{{< details open="true" summary="Expand me..." >}}
No need to press you!
{{< /details >}}
{{ partial "shortcodes/details.html" (dict
  "page" .
  "content" "No need to press you!"
  "open" "true"
  "summary" "Expand me..."
)}}
Expand me…

No need to press you!

Arbitrary Text

​
> [!details]- Show me almost **endless** possibilities
> You can add standard markdown syntax:
> 
> - multiple paragraphs
> - bullet point lists
> - _emphasized_, **bold** and even **_bold emphasized_** text
> - [links](https://example.com)
> - etc.
> 
> ```plaintext
> ...and even source code
> ```
> 
> > the possibilities are endless (almost - including other shortcodes may or may not work)
{{< details summary="Show me almost **endless** possibilities" >}}
You can add standard markdown syntax:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even **_bold emphasized_** text
- [links](https://example.com)
- etc.

```plaintext
...and even source code
```

> the possibilities are endless (almost - including other shortcodes may or may not work)
{{< /details >}}
{{ partial "shortcodes/details.html" (dict
  "page" .
  "content" "You can add standard markdown syntax:\n\n- multiple paragraphs\n- bullet point lists\n- _emphasized_, **bold** and even **_bold emphasized_** text\n- [links](https://example.com)\n- etc.\n\n```plaintext\n...and even source code\n```\n\n> the possibilities are endless (almost - including other shortcodes may or may not work)"
  "summary" "Show me almost **endless** possibilities"
)}}
Show me almost endless possibilities

You can add standard markdown syntax:

  • multiple paragraphs
  • bullet point lists
  • emphasized, bold and even bold emphasized text
  • links
  • etc.
...and even source code

the possibilities are endless (almost - including other shortcodes may or may not work)

Grouped Sections

If you give multiple sections the same name, they behave like an accordion: at most one will be open at any given time. If you open one of the sections, all other sections of the same group will close.

​
> [!details]+ Expand me...
> No need to press you!
{groupid="details-toggle"}

> [!details]- Expand me...
> Thank you!
{groupid="details-toggle"}
{{< details name="details-toggle" open="true" summary="Expand me..." >}}
No need to press you!
{{< /details >}}

{{< details name="details-toggle" summary="Expand me..." >}}
Thank you!
{{< /details >}}
{{ partial "shortcodes/details.html" (dict
  "page" .
  "content" "No need to press you!"
  "name" "details-toggle"
  "open" "true"
  "summary" "Expand me..."
)}}

{{ partial "shortcodes/details.html" (dict
  "page" .
  "content" "Thank you!"
  "name" "details-toggle"
  "summary" "Expand me..."
)}}
Expand me…

No need to press you!

Expand me…

Thank you!

Raw Content

The content is rendered as Markdown on its own, apart from the rest of your page. This has consequences:

  • A footnote defined inside of the content is listed inside of the section instead of at the end of your page, and a footnote defined outside of it can not be referenced.
  • A heading inside of the content doesn’t show up in the table of contents.
  • With goldmark.renderer.unsafe=false (which is the default if you don’t set it), HTML inside of the content is removed. This includes the HTML written by other shortcodes you call in there.

If the content is HTML already or contains other shortcodes, set raw=true. The content is then written as it is and no Markdown is rendered.

{{< details summary="Expand me..." raw=true >}}
<p>A badge inside of a paragraph: {{% badge style="primary" %}}Important{{% /badge %}}</p>
{{< /details >}}
Expand me…

A badge inside of a paragraph: Important

Calling Syntax

Call the shortcode with {{< details >}} as shown on this page. This works regardless of your configuration.

A call with {{% details %}} writes its HTML into the Markdown of your page. With goldmark.renderer.unsafe=false the whole section is removed.