# Tabs :: Hugo Relearn Theme
Show content in tabbed views
Author: Sören Weber

# Tabs

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.

    print("Hello World!")

    echo "Hello World!"

## Usage

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

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

    {{ 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)
        )
      )
    )}}

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

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.

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

    {
      "Hello": "World"
    }

    <Hello>World</Hello>

    Hello = World

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

    {
      "Hello": "World"
    }

    <Hello>World</Hello>

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

Simple text is possible here...

Python is super easy.

- most of the time.
- if you don’t want to output unicode

Bash is for hackers.

...but no markdown

    print("Hello World!")

    echo "Hello World!"