Expand

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

Expand me…

Thank you!

That’s some text with a footnote1

That’s some more text with a footnote.2

  1. And that’s the footnote. ↩︎

  2. Anything of interest goes here.

    Blue light glows blue. ↩︎

Usage

​
> [!transparent]- Expand me...
> Thank you!
{{% expand title="Expand me..." %}}Thank you!{{% /expand %}}
{{% expand "Expand me..." %}}Thank you!{{% /expand %}}
{{ partial "shortcodes/expand.html" (dict
  "page"  .
  "title" "Expand me..."
  "content" "Thank you!"
)}}

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

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

The theme supports Hugo’s built-in details shortcode by mapping the parameter to the theme’s expand shortcode.

Parameter

Name Position Default Notes
title 1 "Expand me..." Arbitrary text to appear next to the expand/collapse icon.
expanded 2 false How the content is displayed.

- true: the content is initially shown
- false: the content is initially hidden
<content> <empty> Arbitrary text to be displayed on expand.

Examples

All Defaults

{{% expand %}}Yes, you did it!{{% /expand %}}
Expand me…
Yes, you did it!

Initially Expanded

{{% expand title="Expand me..." expanded="true" %}}No need to press you!{{% /expand %}}
Expand me…
No need to press you!

Arbitrary Text

{{% expand title="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)
{{% /expand %}}
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)

Using Hugo’s details Shortcode

{{% details %}}
...is what it's all about!
{{% /details %}}
Details
...is what it's all about!