Browser docs

Bootstrap Collapse Shortcode

Hugo Modules Authors Razon Yang March 24, 2023 1 min read Bootstrap Docs Modules Collapse
On this page

The collapse shortcode is used to show and hide content.

Parameters

PositionNameTypeRequiredDefaultDescription
#0headingstringY-The heading.
#1stylestring-primaryprimary, secondary, success, warning, info, danger, light, dark.
#2expand-booleanfalseWhether 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 ...

And then …

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}

1<div class="greeting">
2  {{ site.Params.message }}
3</div>