Accordion examples
Four parents. The first is a short FAQ with open-first off (storefront default). The second forces the first panel open. The third uses CS02 Teal. The fourth paints padding and a dark container. Shared width, placement, and container JSON are documented once on the docs site — this page only shows the accordion-specific switches.
Closed on load
field_apb_open_first is 0. Click a heading to open that panel.
Editors who need a scannable list of headings with bodies that stay out of the way until someone asks.
When the items are parallel chapters of similar length and should feel like a switcher, not a stack of questions.
When there is one block of copy to expand, not a list of headings.
Open first item
Same bundle. field_apb_open_first is 1, so the first panel is already open.
The attribute on #apb-accordion-{id} is data-apb-open-first="1". accordion-js reads it on init.
Only the first item is forced open. The rest behave as usual.
Accordions tolerate uneven panel lengths. This paragraph is here so the open panel has more than one line to show. A second sentence keeps the height honest on a typical desktop column.
Eight items, Teal CS02
A short panel so a longer stack still scans. Item 1 of eight.
A short panel so a longer stack still scans. Item 2 of eight.
A short panel so a longer stack still scans. Item 3 of eight.
A short panel so a longer stack still scans. Item 4 of eight.
A short panel so a longer stack still scans. Item 5 of eight.
A short panel so a longer stack still scans. Item 6 of eight.
A short panel so a longer stack still scans. Item 7 of eight.
A short panel so a longer stack still scans. Item 8 of eight.
Container settings: dark band
Padding 48/32, 8px radius, background #14213D. The accordion still uses CS02 Blue. Shared container JSON is the same field as every other parent.
Only container settings. The items are ordinary accordion panels.
Shared settings on the documentation site. This band exists so the recording can show a painted accordion, not just the default.
Documentation
Field-by-field reference, adding workflow, and the video tutorial live on the documentation site. This page is the live front-end result.