Expand

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

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. ↩︎

Note

This only works in modern browsers flawlessly. While Internet Explorer 11 has issues in displaying it, the functionality still works.

Usage

While the examples are using shortcodes with named parameter you are free to use positional as well or also call this shortcode from your own partials.

​
{{% 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!"
)}}

Parameter

Name Position Default Notes
title 1 "Expand me..." Arbitrary text to appear next to the expand/collapse icon.
open 2 false When true the content text will be initially shown as expanded.
<content> <empty> Arbitrary text to be displayed on expand.

Examples

All Defaults

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

Yes, you did it!

Initially Expanded

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

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

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)