Having a collapsible section in hugo isn’t too hard #

Based on an excellent stack overflow post Add collapsible section in hugo. It turns out that you can create a custom shortcode to solve for this problem.

Create a file in /layouts/shortcodes/details.html that lays out a partial

1
2
3
4

<details>
    <summary>{{ .Get "title" | default "Click to expand" | markdownify }}</summary>
    <div>{{ .Inner | markdownify }}</div>
</details>

You can then use this in markdown templates like this: