Accordion¶

The Accordion widget is a stack of panels that open and close when the visitor clicks their headers. It keeps a long page short by showing only the headers until someone wants the details. Use it for a list of frequently asked questions, grouped settings, or a set of order sections where the visitor opens one at a time.

See also Tabs for panels shown side by side, Section for a single card, and Container for a plain box.

Using it¶

Drop an Accordion onto the page. It starts with three sections. Rename them under Items and add more with Add section. Each section has a header and a panel, and you can drag widgets into both. Set Mode to Single if only one section should be open at a time, and pick which sections start open under Default selected item(s).

Options¶

Option	Values	Default	Description
Items	A list of sections	Three sections	Each item has an id and a label. Add more with Add section. The last remaining item cannot be deleted
Icon	An icon	Chevron down	The open and close indicator in each header
Mode	Single · Multiple	Multiple	Whether one section or several can be open at once
Selection	A state path, for example `$vars.openSection`	Empty	Where the open sections are stored. Leave it empty to keep the state inside the widget
Key fields	Field names	`id`	Which item fields are stored for each open section
Default selected item(s)	Item ids	None	Which sections start open. One item in Single mode, several in Multiple
Variant	Theme variants	Default	Picks the widget's look from the theme. See Variants
Custom Style	CSS for List, Items, Trigger, Content	Empty	Extra styling per part
Box Style	Sizing and spacing	—	The box around the accordion

Tips¶

A few things to keep in mind:

Each item has two slots: the clickable header, called the trigger, and the panel, called the content. Both take any widgets.
Set Selection to a state path when another widget needs to know which section is open.
To switch between panels side by side instead of stacking them, use Tabs.