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.
 
 
 
yova 8051bbbc88 mv to shortcode folder 7 months ago
demo Initial commit 2 years ago
layouts/shortcodes mv to shortcode folder 7 months ago
static Add textClosed, textOpen parameters 1 year ago
LICENSE Initial commit 2 years ago
README.md Add textClosed, textOpen parameters 1 year ago

README.md

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

Credit for initial JS/CSS implementation:

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