Browse Hugo Bootstrap Module

Bootstrap Toggle Shortcode

HugoMods Authors March 24, 2023 2 min read Bootstrap Toggle Docs
On this page
Donate

The config toggle is useful, but it’s limited to generate configuration code blocks in YAML, TOML and JSON languages. The toggle* shortcodes are designed to be more versatile.

Toggle Shortcode

Toggle Parameters

PositionNameTypeRequiredDefaultDescription
#0namestringY-The identifier/name of toggle. MUST be unique per page.
#1stylestring-tabstabs, pills, underline.
#2datastring--The data file of toggle items, required when not using nested shortcodes.

Toggle Item Shortcode

The bs/toggle-item is used to wrap the content each block.

Toggle Item Parameters

PositionNameTypeRequiredDefaultDescription
#0namestringY-The name of toggle item. MUST be unique per toggle.

Syntax

With Markdown.

1{{% bs/toggle-item Foo %}}
2MARKDOWN CONTENT.
3{{% /bs/toggle-item %}}

Without Markdown.

1{{< bs/toggle-item Bar >}}
2RAW CONTENT.
3{{< /bs/toggle-item >}}

Examples

Data File Example

data/bootstrap/toggle-data-file.yaml
1- name: Foo
2  inner: "*Foo* Content with **Markdown**"
3
4- name: Bar
5  inner: "Bar Content without Markdown"

1{{< bs/toggle "data-file" "pills" "bootstrap.toggle-data-file" />}}
Foo Content with Markdown
Bar Content without Markdown

FooBar Example

 1{{< bs/toggle foobar >}}
 2
 3  {{% bs/toggle-item Foo %}}
 4  *Foo* Content with **Markdown**
 5  {{% /bs/toggle-item %}}
 6
 7  {{< bs/toggle-item Bar >}}
 8  Bar Content without Markdown
 9  {{< /bs/toggle-item >}}
10
11{{< /bs/toggle >}}

Foo Content with Markdown

Bar Content without Markdown

SDK Example with the Pills Style

It’s quite easy to write SDK code with the bs/toggle shortcode.

 1{{< bs/toggle name=sdk style=pills >}}
 2
 3  {{< bs/toggle-item JS >}}
 4    {{< highlight js >}}
 5    console.log('hello world');
 6    {{< /highlight >}}
 7  {{< /bs/toggle-item >}}
 8
 9  {{< bs/toggle-item PHP >}}
10    {{< highlight php >}}
11    echo 'hello world';
12    {{< /highlight >}}
13  {{< /bs/toggle-item >}}
14  
15  {{< bs/toggle-item Go >}}
16    {{< highlight go >}}
17    fmt.Println("hello world")
18    {{< /highlight >}}
19  {{< /bs/toggle-item >}}
20
21{{< /bs/toggle >}}

1console.log('hello world');
1echo 'hello world';
1fmt.Println("hello world")

Non-fill, Align to Center With the Underline Style

1{{< bs/toggle name=underline style=underline fill=false alignment=center >}}
2  {{< bs/toggle-item Foo >}}Foo{{< /bs/toggle-item >}}
3  {{< bs/toggle-item Bar >}}Bar{{< /bs/toggle-item >}}
4{{< /bs/toggle >}}
Foo
Bar
Ratio
Accordion