Collapsable Details Block in Quarto

Question

I want a simple Collapsable Details Block in Quarto.

In html, code are as following:

<details>
  <summary>Title</summary>
  Content Content Content Content
</details>

Currently, I had know that there are several ways to make a collapsable in quarto.

• First is to config code-fold: true and it will render code with <details> tag. This is nice for a code block, but I also want to use <details> tag in normal pragraph which can't be fulfilled with this method.
• Second is to config a callout with collapse="true". It will have additional color style, which is not perfectly fit my requirement.

  ::: {.callout-note collapse="true"}
  ## Expandable Section
  This content can be expanded or collapsed
  :::
  

• Third is to write html directly. This should be the last choice since we had already choose to use quarto rather than write html directly.

I had searched the documents but hadn't found the related methods.

I also asked claude, which generate a code seems make sense but actually didn't work:

::: {.details summary="Click to expand"}
This is the hidden content that will be shown when clicked.
:::

Answer 1

I wasn't able to find any documentation on how to create these tags with a native markdown or Quarto method. If you are just trying to avoid typing the HTML in the QMD document itself, this may be a good case to use a custom shortcode. I named by shortcode "details" with the following lua file:

details.lua

return {
    ["details"] = function(raw_args)
        summary = raw_args[1]
        content = raw_args[2]
        return pandoc.RawBlock(
            "html", 
            "<details><summary>" .. summary .. "</summary>" .. content .. "</details>")
    end,
}

Then you can call the shortcode in your QMD file in a simplified syntax

example.qmd

{{< details "Title" "Content Content Content Content" >}}

example.html