hugo-universal-collapsible

A Hugo plugin for collapsible sections (like a spoiler tag) using only vanilla JavaScript and CSS.

The tag is split into 2 sections - above and below the fold. Arbitrarily complex Markdown and HTML content is supported in either section. You can even nest multiple collapsibles!

Installation

Copy the layouts and static folders to your Hugo site root.

Better yet, use git submodule add https://github.com/alexandruioanp/hugo-universal-collapsible/ and create the appropriate symlinks. This way it's easy to update.

Ensure that the CSS and JS files are copied over to your output (public) folder when rendering. The expectation is that they will be accessible at <BaseURL>/<ext>/collapse.<ext>. This can be changed as needed in collapse.html.

If one of the sections (above/below) contains HTML (e.g. from another shortcode), you might have to enable unsafe rendering in config.toml (depending on your Hugo version):

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Parameters

Name	Accepted values	Default	Description
initState	closed, open	closed	The initial state of the collapsible
textClosed	Unicode string	See More ▼	The text to display when the collapsible is closed
textOpen	Unicode string	See Less ▲	The text to display when the collapsible is open

Demo

{{< collapse >}}
{{< collapse/above >}}
The following section is too long...
{{< /collapse/above >}}
{{< collapse/below >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  {{< collapse >}}
  {{< collapse/above >}}
  I'm nested!
  {{< /collapse/above >}}
  {{< collapse/below >}}
  Aenean lacinia condimentum magna ac tincidunt.
  {{< /collapse/below >}}
  {{< /collapse >}}

{{< /collapse/below >}}
{{< /collapse >}}

Credit for initial JS/CSS implementation:

Jason Knight at https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d