You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.1 KiB
59 lines
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 >}}
|
|
```
|
|
|
|
![demo](demo/demo.gif)
|
|
|
|
Credit for initial JS/CSS implementation:
|
|
|
|
Jason Knight at https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d
|