Bootstrap Collapse Shortcode
March 24, 2023
1 min read
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
The collapse shortcode is used to show and hide content.
Parameters
| Position | Name | Type | Required | Default | Description |
|---|---|---|---|---|---|
#0 | heading | string | Y | - | The heading. |
#1 | style | string | - | primary | primary, secondary, success, warning, info, danger, light, dark. |
#2 | expand | - | boolean | false | Whether to expand by default. |
Examples
Steps Example
1{{< bs/collapse heading="1. Step One" expand=true >}}
2First of all ...
3{{< /bs/collapse >}}
4
5{{% bs/collapse "2. Step Two" secondary %}}
6And then ...
7{{% /bs/collapse %}}
8
9{{% bs/collapse "3. Step Three" success %}}
10**Well done**.
11{{% /bs/collapse %}}
1. Step One
First of all …
2. Step Two
And then …
3. Step Three
Well done.
Files Example
1{{< bs/collapse heading="Configuration" expand=true >}}
2 {{< bs/config-toggle hugo >}}
3 params:
4 message: "Hello world!"
5 {{< /bs/config-toggle >}}
6{{< /bs/collapse >}}
7
8{{% bs/collapse "Template" %}}
9 ```go-html-template
10 <div class="greeting">
11 {{ site.Params.message }}
12 </div>
13 ```
14{{% /bs/collapse %}}
Configuration
hugo.yaml
1params:
2 message: Hello world!
hugo.toml
1[params]
2 message = 'Hello world!'
hugo.json
1{
2 "params": {
3 "message": "Hello world!"
4 }
5}
Template
1<div class="greeting">
2 {{ site.Params.message }}
3</div>