hugo-theme-relearn/exampleSite/content/shortcodes/expand.en.md

+++ categories = ["howto", "reference"] description = "Expandable/collapsible sections of text" title = "Expand" +++

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

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

That's some text with a footnote¹

That's some more text with a footnote.²

Usage

{{< tabs groupid="shortcode-parameter">}} {{% tab title="callout" %}}

> [!transparent]- Expand me...
> Thank you!

{{% /tab %}} {{% tab title="shortcode" %}}

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

{{% /tab %}} {{% tab title="shortcode (positional)" %}}

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

{{% /tab %}} {{% tab title="partial" %}}

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

{{% /tab %}} {{< /tabs >}}

Extended 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 %}}Yes, you did it!{{% /expand %}}

Initially Expanded

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

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

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 */%}}

{{% 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
• etc.

...and even source code

the possibilities are endless (almost - including other shortcodes may or may not work) {{% /expand %}}

---

1. And that's the footnote. ↩︎

2. Anything of interest goes here.

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