Bootstrap Toggle Shortcode

Shortcode to generate navs and tabs.

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

PositionNameTypeRequiredDefaultSinceExample
#0namestring---

The identifier and name of toggle. MUST be unique per page.

style

PositionNameTypeRequiredDefaultSinceExample
-stylestring-tabs--

Style: tabs, pills, underline.

data

PositionNameTypeRequiredDefaultSinceExample
-datastring----

The data file of toggle items, required when not using nested shortcodes.

Toggle Item

Toggle Item Parameters

name

PositionNameTypeRequiredDefaultSinceExample
#0namestring---

The identifier and name of toggle. MUST be unique per page.

style

PositionNameTypeRequiredDefaultSinceExample
-stylestring-tabs--

Style: tabs, pills, underline.

data

PositionNameTypeRequiredDefaultSinceExample
-datastring----

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