Bootstrap Toggle Shortcode
Shortcode to generate navs and tabs.
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
Toggle Parameters
name
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
#0 | name | string | ✓ | - | - |
The identifier and name of toggle. MUST be unique per page.
style
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | style | string | - | tabs | - |
Style: tabs, pills, underline.
data
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | 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 |
|---|---|---|---|---|---|
#0 | name | string | ✓ | - | - |
The identifier and name of toggle. MUST be unique per page.
style
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | style | string | - | tabs | - |
Style: tabs, pills, underline.
data
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | 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"
1{{< bs/toggle "data-file" "pills" "bootstrap.toggle-data-file" />}}Foo Content with Markdown
Bar Content without Markdown
Nested 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
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