mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-12-04 21:23:07 +00:00
125 lines
3.1 KiB
Markdown
125 lines
3.1 KiB
Markdown
+++
|
|
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[^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 %}}
|
|
|
|
## Usage
|
|
|
|
{{< tabs groupid="shortcode-parameter">}}
|
|
{{% tab title="callout" %}}
|
|
|
|
````md
|
|
> [!transparent]- Expand me...
|
|
> Thank you!
|
|
````
|
|
|
|
{{% /tab %}}
|
|
{{% tab title="shortcode" %}}
|
|
|
|
````go
|
|
{{%/* expand title="Expand me..." */%}}Thank you!{{%/* /expand */%}}
|
|
````
|
|
|
|
{{% /tab %}}
|
|
{{% tab title="shortcode (positional)" %}}
|
|
|
|
````go
|
|
{{%/* expand "Expand me..." */%}}Thank you!{{%/* /expand */%}}
|
|
````
|
|
|
|
{{% /tab %}}
|
|
{{% tab title="partial" %}}
|
|
|
|
````go
|
|
{{ partial "shortcodes/expand.html" (dict
|
|
"page" .
|
|
"title" "Expand me..."
|
|
"content" "Thank you!"
|
|
)}}
|
|
````
|
|
|
|
{{% /tab %}}
|
|
{{< /tabs >}}
|
|
|
|
[Extended callout syntax](https://gohugo.io/render-hooks/blockquotes/#extended-syntax) is available in other Markdown parsers like Obsidian and therefore is the recommend syntax for generating portable Markdown.
|
|
|
|
The [`notice` shortcode](shortcodes/notice) is also capable of displaying expandable/collapsible sections of text but with additional parameter for color and additional icons.
|
|
|
|
### 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.<br><br>- `true`: the content is initially shown<br>- `false`: the content is initially hidden |
|
|
| _**<content>**_ | | _<empty>_ | Arbitrary text to be displayed on expand. |
|
|
|
|
## Examples
|
|
|
|
### All Defaults
|
|
|
|
````go
|
|
{{%/* expand */%}}Yes, you did it!{{%/* /expand */%}}
|
|
````
|
|
|
|
{{% expand %}}Yes, you did it!{{% /expand %}}
|
|
|
|
### Initially Expanded
|
|
|
|
````go
|
|
{{%/* 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
|
|
|
|
````go
|
|
{{%/* 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](https://example.com)
|
|
- etc.
|
|
|
|
```plaintext
|
|
...and even source code
|
|
```
|
|
|
|
> the possibilities are endless (almost - including other shortcodes may or may not work)
|
|
{{% /expand %}}
|