HTML and CSS only tabs

阅读时间：2 分钟
themes • syntax
markdown • css • html

Basic shortcodes Link to heading

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 Link to heading

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 Link to heading

Any valid markdown can be used inside the tab:

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

```ruby
puts 'Hello'
```

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

```python
print('Hello')
```

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

```js
console.log('Hello')
```

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

And you get this lovely content:

puts 'Hello'

print('Hello')

console.log('Hello')

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