How was the tabbed content interface done in Hugo Docs?

I am looking at getting tabbed content in my markdown pages. I spotted the attached screenshot on the Blackfriday Config page - How was this done?


I’m guessing it was a shortcode with 3 inner codes: yaml, toml, json. Untested but I think Hugo would allow for something like:

{{< tabs >}}
{{< tab title="yaml" >}}
content here 
{{< tab />}}
{{< tab title="toml" >}}
content here too
{{< tab />}}
{{< tab title="json" >}}
you guessed it, content
{{< tab />}}
{{< tabs />}}

Documentation for shortcodes is here:

1 Like

The initial version for that feature was added in

Pinging the original author @regis for more comments :slight_smile:


On a related note, I recently came across the Collapsible project by filament group. That library also allows creating a similar tabbed interface for content. Jump to their demo and search for “Tabbed”.

I prefer to use just plain CSS for accordion menus, tabs, show/hide etc.

The checkbox hack serves me well in most cases. No need for JS.

1 Like

nothing fancy, just css and vanilla js.

I recently discovered the details html tag and used it to build what it’s been designed for: an accordeon! No more JS or hacks!
Doesn’t work nice with transition though, but you can create some sort of animation still.

I have not experimented it with tabs yet, but this may be used for that as well… not sure.

Are you kidding?! I learned about that just yesterday… It works great in Github comments…

    Visible text
  Hidden text; seen after clicking that accordion arrow
1 Like

it is so old though!

Cool. However in typical Redmond fashion it’s not supported yet. So I for one can’t use it right now.

Sure, fallback is minimum though.