Add collapsible section in hugo

Question

Using hugo, I am trying to make a webpage with a collapsible section . In html, this would be done in the following way:

<details>
      <summary>Click to expand!</summary>
      
     Hidden explanation
</details>

hugo uses markdown to add content to the website. I think it's very likely there is a way in hugo to add a collapsible section in the markdown file, because I found some info online to add collapsible sections in markdown in general.

However, I couldn't make this work in the specific context of hugo. In other words, simply adding that piece of html code in markdown didn't work. That makes sense, as I am assuming Hugo's markdown engine does not process raw html.

How can I use this piece of html code in hugo?

Sension

Specifically, what does "I couldn't make it work" mean? The example you show above is just HTML without any Markdown. Can you provide a concrete example and describe what happens? – Rezzani

Using that piece of html code in markdown did not work. – Sension

Answer 1

You are probably running up against a common security feature in templating languages that prevents raw HTML from being rendered. The idea is that allowing such content can introduce security issues, especially if it comes from untrusted user input.

Hugo has a safeHTML filter that can be used to render HTML content:

{{ contentWithHtmlTags | safeHTML }}

Original answer follows, which deals with a different question.

---

Since you didn't provide a complete example in your question I'm making an educated guess based on your self-answer. I think you were trying to do something like this:

<details>
  <summary>**Lorem ipsum**</summary>
  Lorem ipsum _dolor sit amet_, consectetur [adipiscing elit](https://example.org/)
</details>

The original Markdown implementation simply didn't process Markdown inside block-level HTML tags, but modern specifications and implementations do things a bit differently. GitHub Flavored Markdown and CommonMark do process Markdown in HTML when it is separated from the HTML by whitespace:

<details>
  <summary>

    **Lorem ipsum**

  </summary>

  Lorem ipsum _dolor sit amet_, consectetur [adipiscing elit](https://example.org/)

</details>

I'm not sure what flavour of Markdown you are using under the hood, but CommmonMark has become something of standard across many implementations.

Rezzani

Hey, thanks for your answer. I was simply trying to use this piece of html code, but Hugo did not process it. I editing my question to try and make it clearer. – Sension

@DevShark, please see if my updated answer helps. – Rezzani

| safeHTML should work... – Coetaneous

@Mr.Hugo, thanks! I wasn't able to find this just searching for "safe", which I'm used to in other languages. Updating my answer now. – Rezzani

@DevShark, please see the newly updated answer and Mr. Hugo's comment above. This is much better than globally disabling the HTML safety features. – Rezzani

Answer 2

If anyone in the future is interested, here's how I solved this:

Create a shortcode in /layouts/shortcodes/details.html

<details>
  <summary>{{ (.Get 0) | markdownify }}</summary>
  {{ .Inner | markdownify }}
</details>

Then this shortcode can be used inside the content file, in markdown, in the following way:

{{< details >}}
Collapsed text
{{< /details >}}

Sension

Answer 3

Taking @devshark's excellent answer to expand a little bit, you can also choose to put in a custom descriptive text line too like so;

Create a shortcode in /layouts/shortcodes/details.html:

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

The shortcode can be used inside the content file in markdown now with either the default "Click to expand" text:

{{< details >}}
Collapsed text
{{< /details >}}

Or overriding it for specific use-cases:

{{< details title="Learn More" >}}
Collapsed text
{{< /details >}}

Flavin