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

107 lines
2.6 KiB
Markdown
Raw Normal View History

+++
description = "Expandable/collapsible sections of text"
title = "Expand"
+++
2017-08-20 15:10:29 +00:00
The `expand` shortcode displays an expandable/collapsible section of text.
{{% expand title="Expand me..." %}}Thank you!{{% /expand %}}
2021-07-16 20:35:20 +00:00
{{% notice note %}}
2023-02-04 15:01:42 +00:00
This only works in modern browsers flawlessly. While Internet Explorer 11 has issues in displaying it, the functionality still works.
{{% /notice %}}
2021-07-16 20:35:20 +00:00
## Usage
2022-10-31 11:10:36 +00:00
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.
{{< tabs groupId="shortcode-parameter">}}
{{% tab name="shortcode" %}}
````go
{{%/* expand title="Expand me..." */%}}Thank you!{{%/* /expand */%}}
2021-07-16 20:35:20 +00:00
````
{{% /tab %}}
{{% tab name="shortcode (positional)" %}}
2021-07-16 20:35:20 +00:00
````go
{{%/* expand "Expand me..." */%}}Thank you!{{%/* /expand */%}}
````
2021-07-16 20:35:20 +00:00
{{% /tab %}}
{{% tab name="partial" %}}
````go
{{ partial "shortcodes/expand.html" (dict
"context" .
"title" "Expand me..."
"content" "Thank you!"
)}}
````
{{% /tab %}}
{{< /tabs >}}
### Parameter
2017-08-20 15:10:29 +00:00
| Name | Position | Default | Notes |
|:----------------------|:---------|:-----------------|:------------|
2022-10-31 11:10:36 +00:00
| **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. |
2022-10-31 11:10:36 +00:00
| _**&lt;content&gt;**_ | | _&lt;empty&gt;_ | Arbitrary text to be displayed on expand. |
## Examples
### All Defaults
2021-07-16 20:35:20 +00:00
````go
{{%/* expand */%}}Yes, you did it!{{%/* /expand */%}}
2021-07-16 20:35:20 +00:00
````
{{% expand %}}Yes, you did it!{{% /expand %}}
### Initially Expanded
````go
{{%/* expand title="Expand me..." open="true" */%}}No need to press you!{{%/* /expand */%}}
````
2017-08-20 15:10:29 +00:00
{{% expand title="Expand me..." open="true" %}}No need to press you!{{% /expand %}}
2017-08-20 15:10:29 +00:00
### Arbitrary Text
2017-08-20 15:10:29 +00:00
````go
{{%/* expand title="Show me almost endless possibilities" */%}}
You can add standard markdown syntax:
2017-08-20 15:10:29 +00:00
2021-07-16 20:35:20 +00:00
- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even **_bold emphasized_** text
2021-07-16 20:35:20 +00:00
- [links](https://example.com)
- etc.
2017-08-20 15:10:29 +00:00
```plaintext
2021-07-16 20:35:20 +00:00
...and even source code
```
2017-08-20 15:10:29 +00:00
2022-10-31 11:10:36 +00:00
> the possibilities are endless (almost - including other shortcodes may or may not work)
{{%/* /expand */%}}
````
2017-08-20 15:10:29 +00:00
{{% expand title="Show me almost endless possibilities" %}}
You can add standard markdown syntax:
2017-08-20 15:10:29 +00:00
2021-07-16 20:35:20 +00:00
- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even **_bold emphasized_** text
2021-07-16 20:35:20 +00:00
- [links](https://example.com)
- etc.
```plaintext
2021-07-16 20:35:20 +00:00
...and even source code
```
2022-10-31 11:10:36 +00:00
> the possibilities are endless (almost - including other shortcodes may or may not work)
{{% /expand %}}