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

+++ description = "Synchronize selection of content in different tabbed views" title = "Tabbed views" +++

Choose which content to see across the page. Very handy for providing code snippets for multiple languages or providing configuration in different formats.

Code example

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

Renders as:

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

print("Hello World!")

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

> print("Hello World!")

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

echo "Hello World!"

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

Tab views with the same tabs that belong to the same group sychronize their selection:

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

print("Hello World!")

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

> print("Hello World!")

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

echo "Hello World!"

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

Config example

{{</* 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 */>}}

Renders as:

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

{
  "Hello": "World"
}

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

<Hello>World</Hello>

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

Hello = World

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

{{% notice warning %}} When using tab views with different content sets, make sure to use a common groupId for equal sets but distinct groupId for different sets. The groupId defaults to 'default'. Take this into account across the whole site! 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 all tabs will be empty at first. {{% /notice %}}