Browse Hugo Bootstrap Module

Bootstrap Toggle Shortcode

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

Become a backer or sponsor to support our work.

AFDIAN GitHub Sponsors PayPal
On this page
Sponsors

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