Santi Younger

How To Fold Text In Hugo Quick and Easy

Last updated on

Recently I learned how to write HTML code inside of ox-hugo thanks to this amazing short blog-post.

This feature seems to work natively inside of ox-hugo without the need to put it in an HTML block.

This should work just as well for regular HTML, as well as regular Hugo, this is not a special feature of ox-hugo, but it works great in it and that’s where I’m using it.

What It Looks Like

Click Here To Expand

This is really useful for times when you want to write about something optional for your audience to read, without interrupting the flow of the blog-post.

It can also be used for adding long code.

Or in any other creative way you can think of.

How to Do it.

Create an opening “details” tag like so:


Define the text you want it to show with “summary” tag like so:


write what you want to display as a folding title and then close the “summary” tag.


Insert all the text you want to insert.

And then close the “details” tag.


This Is How The Code Would Look Like

 <summary>Write What You Want To Display Here</summary>
The content you want to unfold goes in here.

And This Is What It Would Look Like For The User

Write What You Want To Display Here

The content you want to unfold goes in here.

Of course you get the benefits of using this feature when the content inside of it is longer and worth unfolding.

The following is Hipster Ipsum it’s like Lorem Ipsum but hipster, unfold at your own risk!

Hipster Ipsum

Fanny pack squid ramps, hammock blog 90’s portland shaman poutine shabby chic craft beer.

Activated charcoal taxidermy pork belly chia godard pickled franzen unicorn bushwick adaptogen flannel sriracha.

Copper mug pop-up chicharrones umami, woke godard shaman four dollar toast art party twee PBR&B knausgaard yuccie post-ironic.

Truffaut chambray vape, sriracha cred man braid sartorial live-edge direct trade. Squid woke hoodie letterpress normcore biodiesel.

That’s all folks, hope you found this helpful.