Page Content:

Accordion Component

Overview

The Accordion block presents a list of collapsible items. Selecting an item's header reveals its content; selecting it again hides it. It's a good fit for FAQs, but works for any content you want to reveal on demand.

It follows WAI-ARIA accordion guidance: every header is a real button inside a heading, the focus ring is clearly visible, Enter or Space toggles an item, and the arrow keys, Home, and End move between items.

Config

heading_level: heading level (H2–H4) used for each item header, so the page keeps a sensible outline for screen-reader users. Defaults to H3.

allow_multiple: when set to Yes, more than one item can be open at once. Defaults to No, so opening one item closes the others.

accent_color: hex color for the expand and collapse icon.

Each item also takes an optional ID: the HTML id of the item, so linking to #your-id opens that item and scrolls to it.

Examples

Basic accordion (one panel open at a time)

Multiple panels open, custom accent color, H2 headings