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?

Answer 1

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 >}}

Answer 2

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.