Skip to main content
Documentation/Elements & Controls Reference/Elements/Advanced/Advanced Accordion/Advanced Accordion

Advanced Accordion

Advanced Accordion displays expandable sections whose content is built from child elements. Use it when each panel needs a custom layout rather than a single rich-text answer.

Add and configure Advanced Accordion

  1. Click Add, choose Advanced Accordion, and place it in the container.
  2. Use Content > Content > Content to add the accordion's content items.
  3. Select each Accordion Content child, set its title, and add the panel content inside it.
  4. Choose Accordion and First Item Opened on the parent.
  5. Style Design > Container, Item, and Spacing.
  6. Save your changes.
Advanced Accordion controls in the Breakdance editor
Advanced Accordion controls in the Breakdance editor

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting Purpose and options Behavior
Content Add the child elements offered for this container. Shared
Accordion On/off. Shared
First Item Opened On/off. Shared

Design > Container

Setting Purpose and options Behavior
Background Color or supported fill. Shared
Width Width. Responsive
Padding spacing controls. See linked controls

Design > Item

Setting Purpose and options Behavior
Style Bordered, Pills. Shared
Icon > Position Left, Right. Shared
Icon > Icon Icon. Shared
Icon > Active Icon Icon. Shared
Icon > Size Size and unit. Responsive
Icon > Color Color or supported fill. Shared
Icon > Active Color Color or supported fill. Shared

Shown when Style = Bordered.

Setting Purpose and options Behavior
Bordered > Border Color Color or supported fill. Shared
Bordered > Border Width Border width and unit. Shared
Bordered > Border Radius Border radius and unit. Shared
Bordered > Bottom Only On/off. Shared
Setting Purpose and options Behavior
Background Color or supported fill. Hover
Padding spacing controls. See linked controls
Borders borders controls. When: Style = Pills. See linked controls
Typography typography controls. See linked controls
Active > Text Color Color or supported fill. Shared
Active > Background Color or supported fill. Shared
Transition Duration Transition duration. Shared

Design > Spacing

Setting Purpose and options Behavior
Between Items Between items and unit. Responsive
Below Item Below item and unit. Responsive
Container spacing controls. See linked controls

Troubleshooting

The panel title is wrong

Select the corresponding Accordion Content child and edit its Title.

Opening behavior differs from the intended design

Review Accordion and First Item Opened on the parent, then test the saved front end with keyboard and touch input.