sophia.wtf/themes/hugo-coder/exampleSite/content/posts/html-and-css-only-tabs.md

+++ author = "Hugo Authors" title = "HTML and CSS only tabs" date = "2022-05-15" description = "Sample article showcasing shortcodes for HTML/CSS only tabs" tags = [ "markdown", "css", "html", ] categories = [ "themes", "syntax", ] series = ["Themes Guide"] aliases = ["migrate-from-jekyl"] +++

Basic shortcodes

The following content:

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

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

Will generate:

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

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

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:

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

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

Markdown content

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:

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

puts 'Hello'

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

print('Hello')

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

console.log('Hello')

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

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