An accordion isn’t a single interaction type — it’s a pattern you compose: clickable headers that expand panels, where opening one closes the others. You build it from a click interaction plus per-instance scoping with “reverse on sibling”.
Where: Right sidebar → Interact → Interactions (on each header) + Settings — Add a click interaction, then scope it
Key ideas
- The structure: A parent .f0-accordion with items, each an .f0-accordion-item holding an .f0-accordion-trigger (header) and an .f0-accordion-panel (content).
- Click to expand: A Click (or Hover) interaction on the trigger expands/collapses its panel.
- Exclusive-active: In Settings, scope to instance mode with a group selector, then enable reverse-on-sibling — "when another instance in the same group fires, reverse this one" — so opening one closes the rest.
Steps
- Structure it: a parent (.f0-accordion) with items, each a trigger header + a panel.
- Add a Click interaction on the trigger that expands its panel.
- In Settings, switch to instance mode and set the group selector so each item is independent.
- Enable “reverse on sibling” for classic accordion behaviour (only one open at a time).