2.1 KiB
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