Bootstrap Toggle Shortcode
Shortcode to generate navs and tabs.
Donate
Become a backer or sponsor to support our work.
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
Toggle Parameters
name
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | name | string | ✓ | - | - | - |
The identifier and name of toggle. MUST be unique per page.
style
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | style | string | - | tabs | - | - |
Style: tabs, pills, underline.
data
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | data | string | - | - | - | - |
The data file of toggle items, required when not using nested shortcodes.
Toggle Item
Toggle Item Parameters
name
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | name | string | ✓ | - | - | - |
The identifier and name of toggle. MUST be unique per page.
style
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | style | string | - | tabs | - | - |
Style: tabs, pills, underline.
data
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | data | string | - | - | - | - |
The data file of toggle items, required when not using nested shortcodes.
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"
Source
1{{< bs/toggle "data-file" "pills" "bootstrap.toggle-data-file" />}}Result
Foo Content with Markdown
Bar Content without Markdown
Nested Example
Source
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 >}}Result
Foo Content with Markdown
Bar Content without Markdown
SDK Example with the Pills Style
Source
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 >}}Result
1console.log('hello world');1echo 'hello world';1fmt.Println("hello world")Non-fill, Align to Center With the Underline Style
Source
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 >}}Result
Foo
Bar