Accordion

The Accordion widget lets you organize content into collapsible sections. Use it for FAQs, pricing details, plan comparisons, or any information you want to split into smaller parts that visitors expand as they need them.

Each section works like regular page content: you can format text, add links, create lists and insert images. Formatting is done with a floating toolbar that appears when you click into a section’s content.

Add an Accordion

Drag the Accordion widget from the left element panel onto your page.

We recommend placing it in a Fluid Grid Block(more about them here: https://d.pr/Sy8qaM) , because the block height adjusts automatically as sections expand and collapse. 

If you add an Accordion to a Canvas Block (regular, fixed-size block), make sure you leave enough space at the bottom for the expandable content. The height will depend on the length of your copy and the size of the accordion itself.

Style the Accordion

Select the Accordion and use the right panel to adjust its appearance.

Position and size

• In a Fluid Grid Block, set the container’s margins.
• In a Canvas Block, set the widget’s position and size.

Accordion settings

• Background color and arrow color.
• Section divider size and color.
• Vertical spacing to add space between sections.
• Corner radius and consistent corners.

Text style

• Style section headlines and body paragraphs separately.
• Under Paragraph style, set the Link color (applies to all links in the Accordion’s content), List marker color and List marker size, and choose the Unordered list and Ordered list styles.

Manage sections

Click on the Accordion, and on the right panel you can: add sections by clicking the + icon, remove them by clicking the X next to a section, or reorder them by clicking the dots icon and dragging and dropping them in the correct position.

To add content to a section, click its header to expand it, then click into the section content and start typing to replace the placeholder text.

Format text in a section

1. Click a section header to expand it, then click into the section content.
2. Select the text you want to format.
3. Use the floating toolbar: Bold, Italic, Underline, Strikethrough, Unordered list, Ordered list and Text alignment.

Add a link

1. Select a word or phrase in the section content.
2. Click Link in the floating toolbar.
3. In the Accordion Link Setup panel on the right, choose a Link type: Outside URL, Landing page, Pop up, On page link, File download or Footnote.
4. Fill in the details (for example, the URL) and, optionally, set an Aria label, Open link in a new tab or Track as a conversion.
5. Click Save.

Insert and position an image

1. Place your cursor where the image should go and click Insert image in the floating toolbar.

2. Pick an image from your Images library and click Insert to page.
3. Click the image, then open the image menu from the toolbar and choose a position: In line with text, Wrap text, image left, Center image or Wrap text, image right.
4. Set the Image width in % (1–100).

From the same menu, you can also Replace image or Remove image.

Visibility and other options

• Visibility: Show the Accordion on desktop, mobile or both.
• Right-click options: Duplicate, reorder (bring forward / send backward), change visibility or delete the Accordion.