Accordion

The built-in accordion tag — collapsible sections whose bodies are full Markdown. Usage, options, and a live example with source.

A compound built-in tag for collapsible sections. The parent {% accordion %} wraps one or more {% accordionSection title="…" %} children; each section’s title is the clickable control and everything between the section tags is its panel body. That body is ordinary Markdown — headings, lists, code, links, even nested component(...) calls — and renders as such. By default one panel is open at a time; add multiple to let several stay open.

Use it as {% accordion %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'accordion', …) — nesting component('aardvark', 'accordionSection', …) calls as its children.

Basic accordion

A single-open accordion with two sections. Each panel body is full Markdown.

Multiple open panels

By default opening one panel closes the others. Add the bare multiple flag to let several stay open at once. In multiple mode, defaultValue takes a comma-separated list of section values to open on load (a section’s value defaults to a slug of its title, or set it explicitly).

A single panel open on load

In single-open mode, defaultValue is one section value — the panel to expand on load. Here the second section is open from the start.

With other components

A panel body is full Markdown, so it can hold any other built-in — here an icon in the title text and a nested card in the body.

Attributes

{% accordion %}

The look is fixed to Mantine’s contained variant — there is no author-facing variant.

{% accordionSection %}

The body between {% accordionSection %} and {% endAccordionSection %} is the panel content (full Markdown). In the Python form it is the children argument.

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="Accordion"] — or through the Mantine Styles API classes (.mantine-Accordion-root and its inner parts):

/* Every rendered Accordion carries this island marker */
[data-aardvark-island="Accordion"] { }

/* Mantine Styles API class on the root element */
.mantine-Accordion-root { }
.mantine-Accordion-item { }
.mantine-Accordion-control { }
.mantine-Accordion-panel { }

Injecting Attributes

attr={…} forwards raw HTML attributes — id, data-*, ARIA, analytics hooks — onto the rendered accordion root. (Scalar attributes beyond the ones it handles — like multiple to keep several panels open, or a defaultValue — pass straight through to the underlying Mantine Accordion; attr={…} is the channel for raw HTML attributes.)