Details

Th' details shortcode displays an expandable/collaps'ble section o' text.

Expand me…

Thank ye!

Usage

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

This shortcode be fully compatable wit' Hugo’s details shortcode but offers some extensions.

Marrrkdown callout rules be avail'ble 'n other Marrrkdown parsers like Obsidian an' therefore be th' recommended rules fer generat'n portable Marrrkdown.

In Marrrkdown rules th' section be a callout o' th' style details. Its first line takes summary an' open, while name an' title be written as th' Marrrkdown attributes groupid an' hint. class an' raw be not avail'ble.

Th' callout shortcode be also cap'ble o' display'n expandable/collaps'ble sections o' text but wit' additional parameters fer color an' additional ay'cons.

Parameters

Name Default Notes
summary "Details" Arbitrary text t' appear next t' th' expand/collapse ay'con.
open false How th' rrrambl'n be displayed.

- true: th' rrrambl'n be initially shown
- false: th' rrrambl'n be initially hidden
name <empty> Arbitrary name o' th' group th' section belongs t'.

O' all sections wit' th' same name, at most one be open at any given time.
class <empty> CSS classes t' be added t' th' section.
title <empty> Arbitrary text t' be displayed as a tooltip fer th' summary.
raw false Extension. How th' rrrambl'n be processed.

- false: th' rrrambl'n be rendered as Marrrkdown
- true: th' rrrambl'n be written as it be, see below
<content> <empty> Arbitrary text t' be displayed on expand.

Examples

All Defaults

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

Yes, ye did it!

Initially Expanded

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

No need t' press ye!

Arbitrary Text

​
> [!details]- Show me almost **endless** possibilities
> Ye can add standard markdown rules:
> 
> - multiple paragraphs
> - bullet point lists
> - _emphasized_, **bold** an' even **_bold emphasized_** text
> - [links](https://example.com)
> - etc.
> 
> ```plaintext
> ...and even source code
> ```
> 
> > th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)
{{< details summary="Show me almost **endless** possibilities" >}}
Ye can add standard markdown rules:

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

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

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

Ye can add standard markdown rules:

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

th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)

Grouped Sect'ns

If ye give multiple sections th' same name, they behave like an accordion: at most one will be open at any given time. If ye open one o' th' sections, all other sections o' th' same group will close.

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

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

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

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

No need t' press ye!

Expand me…

Thank ye!

Raw Rrrambl'n

Th' rrrambl'n be rendered as Marrrkdown on its own, apart from th' rest o' yer plank. This has consequences:

  • A footnote defined inside o' th' rrrambl'n be listed inside o' th' section instead o' at th' end o' yer plank, an' a footnote defined outside o' it can not be referenced.
  • A head'n inside o' th' rrrambl'n doesn’t show up 'n th' table o' contents.
  • Wit' goldmark.renderer.unsafe=false (which be th' default if ye don’t set it), HTML inside o' th' rrrambl'n be removed. This includes th' HTML written by other shorrrtcodes ye call 'n there.

If th' rrrambl'n be HTML already or contains other shorrrtcodes, set raw=true. Th' rrrambl'n be then written as it be an' no Marrrkdown be rendered.

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

A badge inside o' a paragraph: Important

Call'n Rules

Call th' shortcode wit' {{< details >}} as shown on this plank. This works regardless o' yer configurat'n.

A call wit' {{% details %}} writes its HTML into th' Marrrkdown o' yer plank. Wit' goldmark.renderer.unsafe=false th' whole section be removed.