Html and Css Only Tabs

Reading: 1 Min

Shortcodes

The following content:

{{< tabgroup >}}
{{< tab name="Hello" >}}
Hello World!
{{< /tab >}}

{{< tab name="Goodbye" >}}
Goodbye Everybody!
{{< /tab >}}
{{< /tabgroup >}}

Will generate:

Hello World!
Goodbye Everybody!

Right alighment

You can also align the tabs to the right:

{{< tabgroup align="right" >}}
{{< tab name="Hello" >}}
Hello World!
{{< /tab >}}

{{< tab name="Goodbye" >}}
Goodbye Everybody!
{{< /tab >}}
{{< /tabgroup >}}

Giving you this look:

Hello World!
Goodbye Everybody!

Markdown content

Any valid markdown can be used inside the tab:

{{< tabgroup align="right" style="code" >}}
{{< tab name="toml" >}}

```toml
[params]
puts = 'Hello'
```

{{< /tab >}}
{{< tab name="yaml" >}}

```yaml
params:
  puts: "Hello"
```

{{< /tab >}}
{{< tab name="json" >}}

```json
{
  "params": {
    "puts": "Hello"
  }
}
```

{{< /tab >}}
{{< /tabgroup >}}

And you get this lovely content:

[params]
puts = 'Hello'

params:
  puts: "Hello"

{
  "params": {
    "puts": "Hello"
  }
}

In this case style="code" makes it look a little nicer for scenarios where your content is purely a code block.

Comments if enabled well be shown here.