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

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

The tabs shortcode displays arbitrary content in unlimited number of tabs. This comes in handy eg. for providing code snippets for multiple languages or providing configuration in different formats.

{{< tabs groupId="tabs-example-language" >}} {{% 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.

{{< 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" .
  "tabs" (slice
    (dict
      "name" "python"
      "content" ("```python\nprint(\"Hello World!\")\n```" | markdownify)
    )
    (dict
      "name" "bash"
      "content" ("```bash\necho \"Hello World!\"\n```" | markdownify)
    )
  )
)}}

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

Parameter

Name	Default	Notes
groupId	default	Arbitrary name of the group the tab view belongs to. Tab views with the same groupId sychronize their selected tab. This sychronization applies to the whole site!
<content>	<empty>	Arbitrary number of tabs defined with the tab sub-shortcode.

{{% notice note %}} When using tab views with different content sets, make sure to use a common groupId for equal sets of tabs but distinct groupId for different sets.

The tab selection is restored automatically based on the groupId and if it cannot find a tab item because it came from the 'default' group on a different page then the first tab is selected instead. {{% /notice %}}

Examples

Distinct groupId

{{</* tabs groupId="config" */>}}
{{%/* tab name="json" */%}}
```json
{
  "Hello": "World"
}
```
{{%/* /tab */%}}
{{%/* tab name="XML" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{%/* tab name="properties" */%}}
```properties
Hello = World
```
{{%/* /tab */%}}
{{</* /tabs */>}}

{{< tabs groupId="tabs-example-config" >}} {{% tab name="json" %}}

{
  "Hello": "World"
}

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

<Hello>World</Hello>

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

Hello = World

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

Non-Distinct groupId

See what happens to this tab view if you select properties tab from the previous example.

{{</* tabs groupId="config" */>}}
{{%/* tab name="json" */%}}
```json
{
  "Hello": "World"
}
```
{{%/* /tab */%}}
{{%/* tab name="XML" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{</* /tabs */>}}

{{< tabs groupId="tabs-example-config" >}} {{% tab name="json" %}}

{
  "Hello": "World"
}

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

<Hello>World</Hello>

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