Expandable sections

In some cases, where there is a lot of content, it’s helpful to collapse certain sections. That way, readers get an overview of what’s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded.

The expandable shortcode takes three parameters:

• label — This is the label for the the section heading.
• level — This is the heading level (e.g. 2 or <h2>) that will contain the label. If you omit a level parameter, no heading is used; it’s just a button
• open — Include this and give it a value of “true” or “yes” to make the section expanded on page load

Here’s what the code might look like for a simple expandable section containing markdown:

{{% expandable label="A section of dummy text" level="2" %}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
{{% /expandable %}}

Let’s look at what that outputs as:

Successive collapsible sections fit snugly together. The second of the following two has open="true".

Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the “%” notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.

{{<expandable label="A section of dummy text" level="2">}}
<p>Here is a pattern reference shortcode: {{% pattern "Writing inline demos" %}}.</p>
{{</expandable>}}