Tabs

The tabs shortcode displays arbitrary content in an unlimited number of tabs.

​
The AI native programming language. 
echo "For guys who like to tinker."
For the connoisseur of programming.
For the guys that can cope with syntax.
For guys that need two destructors.

Usage

​
{{< tabs >}}
{{% tab title="Python Saying" %}}The AI native programming language.{{% /tab %}}
{{% tab title="Terminal Sourcecode" %}}
```bash
echo "For guys who like to tinker."
```
{{% /tab %}}
{{% tab color="fuchsia" title="C Ramblings" %}}For the connoisseur of programming.{{% /tab %}}
{{% tab color="red" title="C++ Ramblings++" %}}For the guys that can cope with syntax.{{% /tab %}}
{{% tab title="C# ~~GC is cool~~" %}}For guys that need two destructors.{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "The AI native programming language."
      "title" "Python Saying"
    )
    (dict
      "content" "```bash\necho \"For guys who like to tinker.\"\n```"
      "title" "Terminal Sourcecode"
    )
    (dict
      "color" "fuchsia"
      "content" "For the connoisseur of programming."
      "title" "C Ramblings"
    )
    (dict
      "color" "red"
      "content" "For the guys that can cope with syntax."
      "title" "C++ Ramblings++"
    )
    (dict
      "content" "For guys that need two destructors."
      "title" "C# ~~GC is cool~~"
    )
  )
)}}

If you just want a single tab you can instead call the tab shortcode standalone.

Also follow the above link to see the parameter for each nested tab.

Parameters

Name Default Notes
groupid <random> Arbitrary name of the group the tab view belongs to.

Tab views with the same groupid synchronize their selected tab. The tab selection is restored automatically based on the groupid for tab view. If the selected tab cannot be found in a tab group the first tab is selected instead.

This synchronization applies to the whole site!
style <empty> Sets a default value for every contained tab. Can be overridden by each tab. See the tab shortcode for possible values.
color <empty> Sets a default value for every contained tab. Can be overridden by each tab. See the tab shortcode for possible values.
title <empty> Arbitrary title written in front of the tab view.
icon <empty> Font Awesome icon name set to the left of the title.
<content> <empty> Arbitrary number of tabs defined with the tab sub-shortcode.

Examples

Behavior of the groupid

See what happens to the tab views while you select different tabs.

While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.

Note

The selected tab will be stored in the reader’s browser.

Group A, Tabs 1

​
{{< tabs groupid="tab-example-a" title="Group A, Tabs 1" >}}
{{% tab title="JSON" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="_**XML**_" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{% tab title="Text" %}}    World{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "```json\n{ \"Hello\": \"World\" }\n```"
      "title" "JSON"
    )
    (dict
      "content" "```xml\n<Hello>World</Hello>\n```"
      "title" "_**XML**_"
    )
    (dict
      "content" "    World"
      "title" "Text"
    )
  )
  "groupid" "tab-example-a"
  "title" "Group A, Tabs 1"
)}}

Group A, Tabs 2

​
{{< tabs groupid="tab-example-a" title="Group A, Tabs 2" >}}
{{% tab title="JSON" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "```json\n{ \"Hello\": \"World\" }\n```"
      "title" "JSON"
    )
    (dict
      "content" "```xml\n<Hello>World</Hello>\n```"
      "title" "XML"
    )
  )
  "groupid" "tab-example-a"
  "title" "Group A, Tabs 2"
)}}

Group B

​
{{< tabs groupid="tab-example-b" title="Group B" >}}
{{% tab title="JSON" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "```json\n{ \"Hello\": \"World\" }\n```"
      "title" "JSON"
    )
    (dict
      "content" "```xml\n<Hello>World</Hello>\n```"
      "title" "XML"
    )
  )
  "groupid" "tab-example-b"
  "title" "Group B"
)}}

Rendered Example

Group A, Tabs 1
{ "Hello": "World" }
<Hello>World</Hello>
World
Group A, Tabs 2
{ "Hello": "World" }
<Hello>World</Hello>
Group B
{ "Hello": "World" }
<Hello>World</Hello>

Nested Tab Views and Color

In case you want to nest tab views, the parent tab that contains nested tab views needs to be declared with {{< tab >}} instead of {{% tab %}}. Note, that in this case it is not possible to put markdown in the parent tab.

You can also set style and color parameter for all tabs and overwrite them on tab level. See the tab shortcode for possible values.

​
{{< tabs groupid="main" icon="thumbtack" style="primary" title="Rationale" >}}
{{< tab title="Text" >}}
  Simple text is possible here...
  {{< tabs groupid="tabs-example-language" >}}
  {{% tab title="python" %}}
  Python is **super** easy.
  
  - most of the time.
  - if you don't want to output unicode
  {{% /tab %}}
  {{% tab title="bash" %}}Bash is for **hackers**.{{% /tab %}}
  {{< /tabs >}}
{{< /tab >}}
{{< tab color="darkorchid" style="default" title="Code" >}}
  ...but no markdown
  {{< tabs groupid="tabs-example-language" >}}
  {{% tab title="python" %}}
  ```python
  print("Hello World!")
  ```
  {{% /tab %}}
  {{% tab title="bash" %}}
  ```bash
  echo "Hello World!"
  ```
  {{% /tab %}}
  {{< /tabs >}}
{{< /tab >}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "Simple text is possible here..."
      "content" (partial "shortcodes/tabs.html" (dict
        "page" .
        "content" (slice
          (dict
            "content" "Python is **super** easy.\n\n- most of the time.\n- if you don't want to output unicode"
            "title" "python"
          )
          (dict
            "content" "Bash is for **hackers**."
            "title" "bash"
          )
        )
        "groupid" "tabs-example-language"
      ))
      "title" "Text"
    )
    (dict
      "color" "darkorchid"
      "content" "...but no markdown"
      "content" (partial "shortcodes/tabs.html" (dict
        "page" .
        "content" (slice
          (dict
            "content" "```python\nprint(\"Hello World!\")\n```"
            "title" "python"
          )
          (dict
            "content" "```bash\necho \"Hello World!\"\n```"
            "title" "bash"
          )
        )
        "groupid" "tabs-example-language"
      ))
      "style" "default"
      "title" "Code"
    )
  )
  "groupid" "main"
  "icon" "thumbtack"
  "style" "primary"
  "title" "Rationale"
)}}
Rationale
​

Python is super easy.

  • most of the time.
  • if you don’t want to output unicode
Bash is for hackers.
​
print("Hello World!")
echo "Hello World!"