I am looking at getting tabbed content in my markdown pages. I spotted the attached screenshot on the Blackfriday Config page - https://gohugo.io/getting-started/configuration/#configure-blackfriday. How was this done?
Cheers
Mark
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: https://gohugo.io/templates/shortcode-templates/#readout
1 Like
The initial version for that feature was added in https://github.com/gohugoio/gohugoioTheme/commit/22ec76a458219161a93be8e221a306ae01f3a785.
Pinging the original author @regis for more comments 
2 Likes
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”.
- Lib:
collapsible.tab.js
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…
<details>
<summary>
Visible text
</summary>
Hidden text; seen after clicking that accordion arrow
</details>
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.