Expand

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

Expand me…

Thank you!

Usage

> [!default] Expand me...
> Thank you!

{{% expand title="Expand me..." %}}
Thank you!
{{% /expand %}}

{{% expand "Expand me..." %}}
Thank you!
{{% /expand %}}

{{ partial "shortcodes/expand.html" (dict
  "page" .
  "content" "Thank you!"
  "title" "Expand me..."
)}}

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

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

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

Parameters

Name	Position	Default	Notes
title	1	`"Details"`	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

> [!default]
> Yes, you did it!

{{% expand %}}
Yes, you did it!
{{% /expand %}}

{{% expand %}}
Yes, you did it!
{{% /expand %}}

{{ partial "shortcodes/expand.html" (dict
  "page" .
  "content" "Yes, you did it!"
)}}

Details

Yes, you did it!

Initially Expanded

> [!transparent]+ Expand me...
> No need to press you!

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

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

{{ partial "shortcodes/expand.html" (dict
  "page" .
  "content" "No need to press you!"
  "expanded" "true"
  "title" "Expand me..."
)}}

Expand me…

No need to press you!

Arbitrary Text

> [!default] 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)
> 
> That's some text with a footnote[^1]
> 
> [^1]: And that's the footnote.
> 
> That's some more text with a footnote.[^someid]
> 
> [^someid]:
>     Anything of interest goes here.
> 
>     Blue light glows blue.

{{% 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)

That's some text with a footnote[^1]

[^1]: And that's the footnote.

That's some more text with a footnote.[^someid]

[^someid]:
    Anything of interest goes here.

    Blue light glows blue.
{{% /expand %}}

{{% 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](https://example.com)
- etc.

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

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

That's some text with a footnote[^1]

[^1]: And that's the footnote.

That's some more text with a footnote.[^someid]

[^someid]:
    Anything of interest goes here.

    Blue light glows blue.
{{% /expand %}}

{{ partial "shortcodes/expand.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)\n\nThat's some text with a footnote[^1]\n\n[^1]: And that's the footnote.\n\nThat's some more text with a footnote.[^someid]\n\n[^someid]:\n    Anything of interest goes here.\n\n    Blue light glows blue."
  "title" "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)

That’s some text with a footnote¹

That’s some more text with a footnote.²

And that’s the footnote. ↩︎
Anything of interest goes here.

Blue light glows blue. ↩︎

Using Hugo’s `details` Shortcode

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