# 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:

    print("Hello World!")

    > print("Hello World!")

    echo "Hello World!"

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

    print("Hello World!")

    > print("Hello World!")

    echo "Hello World!"

## 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:

    {
      "Hello": "World"
    }

    <Hello>World</Hello>

    Hello = World

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.