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 family, 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.
  • You can select text while editing without dragging the whole widget.
  • When you edit content inline, the floating toolbar includes text formatting and font-weight controls.
  • Links added inside accordion content keep the selected text and reopen with the current link details when you edit them again.
  • Use the hover handle to reorder items or duplicate an item from the same hover toolbar.
  • Use the add button to create new items.

Ask AI

Use Ask AI to draft or refine accordion items faster.

  • Generate items: create or replace questions and answers from a prompt.
  • Improve all items: rewrite every item for clearer, more consistent wording.
  • Shorten all items or Lengthen all items: adjust answer depth while preserving the item count.
  • Add an item: append one new question and answer that matches the existing accordion.
  • Custom prompt: give a text-only instruction for the current items.

Accordion AI uses the row and page context, which is useful for FAQ sections that need to match the rest of the page.

Toolbar actions

  • Accordion Settings
  • Alignment
  • Animation
  • Position
  • Copy
  • Delete
Updated Apr 26, 2026

Was this helpful?