Browse Hugo Bootstrap Module

Bootstrap Collapse Shortcode

HugoMods Authors Razon Yang March 24, 2023 1 min read Bootstrap Docs Modules Collapse
Donate

Become a backer or sponsor to support our work.

AFDIAN GitHub Sponsors PayPal
On this page
Sponsors

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 &hellip;

  <strong>Well done</strong>.

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}

  <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;greeting&#34;</span><span class="p">&gt;</span>

2 {{ site.Params.message }} 3</div>

Clearfix
Config Toggle