How to add an accordion

It turns out it's really easy to add a click-to-expand element (also a dropdown or accordion element) in Markdown + HTML without any JavaScript, since it's part of the spec.

This:

<details>
    <summary>
        Click here to expand
    </summary>
    Surprise!
</details>

turns into this:

Of course you can make this fancier with CSS and whatnot. But the core action is built into HTML, so there's no need for JavaScript.

If you want a Zola shortcode, you can use this example one:

templates/shortcodes/summary.html:

<details>
    <summary>{{ title }}</summary>
    {{ body }}
</details>

and

{% summary(title="Click here") %}
Hello, world!
{% end %}

which turns into this:

Found here: gist