AllDesignWidgetsAccordion Widget

Accordion Widget

Create expandable content sections with presets and styling.

Use the Accordion widget to organize content into expandable sections.

Add an Accordion widget

1

Open the widget picker

In the page editor, open Widgets.

2

Drag Accordion

In Content, drag Accordion (accordion icon) onto the page.

3

Open Accordion Settings

Click the widget and choose Accordion Settings.

Accordion Settings

The dialog starts in Style Settings and includes presets. You can also open Advanced Styling Options for full control.

Style Settings (simple view)

  • Style Presets: Style 1 (Simple), Style 2 (Rounded), Style 3 (Shadow), Custom
  • Allow Multiple Open
  • Icon Position: Left or Right
  • Advanced Styling Options button

Advanced view

Tabs include Accordion, Label Style, and Container.

  • Accordion: allow multiple open, icon type (Chevron, Plus, Circle), icon position, show icon separator, item spacing
  • Label Style: label text color, background color, border color, font size, font weight, padding
  • Container: content text color, content background color, content font size, content padding, border radius, shadow

Editing accordion items

  • Click a title or content area to edit inline.
  • Drag items to reorder or duplicate.
  • Use the add button to create new items.

Toolbar actions

  • Accordion Settings
  • Alignment
  • Animation
  • Position
  • Copy
  • Delete
Updated Jan 7, 2026

Was this helpful?