hugo-theme-relearn/exampleSite/content/shortcodes/tabs.en.md

+++ description = "Show content in tabbed views" title = "Tabs" +++

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

This comes in handy eg. for providing code snippets for multiple languages.

If you just want a single tab you can instead call the [tab shortcode]({{% relref "shortcodes/tab" %}}) standalone.

{{< tabs >}} {{% tab name="python" %}}

print("Hello World!")

{{% /tab %}} {{% tab name="bash" %}}

echo "Hello World!"

{{% /tab %}} {{< /tabs >}}

Usage

While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.

See the [tab shortcode]({{% relref "shortcodes/tab" %}}) for a description of the parameter for nested tabs.

{{< tabs groupid="shortcode-parameter">}} {{% tab name="shortcode" %}}

{{</* tabs */>}}
{{%/* tab name="python" */%}}
```python
print("Hello World!")
```
{{%/* /tab */%}}
{{%/* tab name="bash" */%}}
```bash
echo "Hello World!"
```
{{%/* /tab */%}}
{{</* /tabs */>}}

{{% /tab %}} {{% tab name="partial" %}}

{{ partial "shortcodes/tabs.html" (dict
  "context" .
  "content" (slice
    (dict
      "name" "python"
      "content" ("```python\nprint(\"Hello World!\")\n```" | .RenderString)
    )
    (dict
      "name" "bash"
      "content" ("```bash\necho \"Hello World!\"\n```" | .RenderString)
    )
  )
)}}

{{% /tab %}} {{< /tabs >}}

Parameter

Name	Default	Notes
groupid	<random>	Arbitrary name of the group the tab view belongs to. Tab views with the same groupid sychronize their selected tab. The tab selection is restored automatically based on the groupid for tab view. If the selected tab can not be found in a tab group the first tab is selected instead. This sychronization applies to the whole site!
<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.

{{< tabs >}} {{% tab name="Group A, Tab View 1" %}}

{{</* tabs groupid="a" */>}}
{{%/* tab name="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
{{%/* tab name="_**XML**_ stuff" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{%/* tab name="properties" */%}}
```properties
Hello = World
```
{{%/* /tab */%}}
{{</* /tabs */>}}

{{% /tab %}} {{% tab name="Group A, Tab View 2" %}}

{{</* tabs groupid="a" */>}}
{{%/* tab name="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
{{%/* tab name="XML stuff" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{</* /tabs */>}}

{{% /tab %}} {{% tab name="Group B" %}}

{{</* tabs groupid="b" */>}}
{{%/* tab name="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
{{%/* tab name="XML stuff" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{</* /tabs */>}}

{{% /tab %}} {{< /tabs >}}

Group A, Tab View 1

{{< tabs groupid="tab-example-a" >}} {{% tab name="json" %}}

{ "Hello": "World" }

{{% /tab %}} {{% tab name="XML stuff" %}}

<Hello>World</Hello>

{{% /tab %}} {{% tab name="properties" %}}

Hello = World

{{% /tab %}} {{< /tabs >}}

Group A, Tab View 2

{{< tabs groupid="tab-example-a" >}} {{% tab name="json" %}}

{ "Hello": "World" }

{{% /tab %}} {{% tab name="XML stuff" %}}

<Hello>World</Hello>

{{% /tab %}} {{< /tabs >}}

Group B

{{< tabs groupid="tab-example-b" >}} {{% tab name="json" %}}

{ "Hello": "World" }

{{% /tab %}} {{% tab name="XML stuff" %}}

<Hello>World</Hello>

{{% /tab %}} {{< /tabs >}}

Nested Tabs

In case you want to nest tabs, the parent tab that contains the subtabs 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.

{{</* tabs groupid="main" */>}}
{{</* tab name="Text" */>}}
  Simple text is possible here...
  {{</* tabs groupid="tabs-example-language" */>}}
  {{%/* tab name="python" */%}}
  Python is **super** easy.

  - most of the time.
  - if you don't want to output unicode
  {{%/* /tab */%}}
  {{%/* tab name="bash" */%}}
  Bash is for **hackers**.
  {{%/* /tab */%}}
  {{</* /tabs */>}}
{{</* /tab */>}}

{{</* tab name="Code" */>}}
  ...but no markdown
  {{</* tabs groupid="tabs-example-language" */>}}
  {{%/* tab name="python" */%}}
  ```python
  print("Hello World!")
  ```
  {{%/* /tab */%}}
  {{%/* tab name="bash" */%}}
  ```bash
  echo "Hello World!"
  ```
  {{%/* /tab */%}}
  {{</* /tabs */>}}
{{</* /tab */>}}
{{</* /tabs */>}}

{{< tabs groupid="main" >}} {{< tab name="Text" >}} Simple text is possible here... {{< tabs groupid="tabs-example-language" >}} {{% tab name="python" %}} Python is super easy.

• most of the time.
• if you don't want to output unicode {{% /tab %}} {{% tab name="bash" %}} Bash is for hackers. {{% /tab %}} {{< /tabs >}} {{< /tab >}}

{{< tab name="Code" >}} ...but no markdown {{< tabs groupid="tabs-example-language" >}} {{% tab name="python" %}}

print("Hello World!")

{{% /tab %}} {{% tab name="bash" %}}

echo "Hello World!"

{{% /tab %}} {{< /tabs >}} {{< /tab >}} {{< /tabs >}}