Interact with this post using Mastodon or
Tabs in your posts
Shortcodes in Hugo are a wonderful and easy way to do some magic on your blog. Here is another shortcode I “borrowed” from squidfingers . This one allows to display text within tabs right inside your post. I told you, it’s magiiiiiic!
What it does
Here is a short example of what tabs look like with this shortcode:
Let’s write somethign in Tab 1
This is the text hidden in the second tab
This is the last tab. Why? Because I only setup three, but there’s no limits :)
Customization is limited to the minimum necessary. You can define the title (“label”) of each tag and define if any should be displayed by default (“selected=true”).
As always, all tabs colors can be defined in your
CSS
.
Have you looked at the last tab in this example? If not, then you just missed that the number of tabs to be displayed is limited… to your own will :)
Use-cases
This may be useful if you write a technical tutorial, a multi-(natural/code)language guide, or a comparison post for example.
I’ve personally used it to
host long scripts
and make the reading experience easier.
The tabpane shortcode could be a benefitial upgrade for both you and your readers. It keeps your content structured and saves valuable vertical screen space.