expand

Creates an expandable block of content.

{{< expand "Text to click to expand content." >}}
Content that is revealed upon expansion.
{{< /expand >}}

Renders to:

Text to click to expand content.
Content that is revealed upon expansion.

Supports Markdown in the expand text.

Options

  • scroll: Optional. Imposes a standard maximum height on the expanded text box.
{{< expand "Text to click to expand content." scroll >}}
...
{{< /expand >}}

Examples

Scroll

{{< expand "Text to click to expand content." scroll >}}
...
{{< /expand >}}

Renders to:

Text to click to expand content.

Here is content.

More content.

Even more content.

Hello.

Still more content.

Yes.

Can you believe it?

More.

And more and more.

So much that you have to scroll to see it.

Nesting

{{< expand "Text to click to expand content." >}}
Content that is revealed upon expansion.
{{% prism %}}
Prism content.
{{% /prism %}}
{{< /expand >}}

Renders to:

Text to click to expand content.

Content that is revealed upon expansion.

    
        
            <p>Prism content.</p>

        
    
Note

Expand supports shortcodes in the expansion content.

For Hugo to properly render prism nested in expand, use % for the inner prism shortcode to render its content, and use </> for the outer expand shortcode to prevent it from rendering twice.

To create a series of expands that will only open one at a time, wrap multiple expands with accordion.