The accordion widget helps visitors find exactly the information they are looking for easily. Add it to your sites and visitors do not need to scroll through blocks of content they are not interested in. Instead, they can be shown a list of questions or titles and simply choose to open the ones they want to read more about. Create compact and easy-to-read FAQs, product highlights, or upcoming events.

To add accordion widgets:

1. In the left panel, click Widgets.
2. Click and drag the Accordion widget into your site.

To learn more about adding widgets to your site, see Add Widgets.

Content Editor

1. Adding the widget opens the content editing menu. In this menu, you can add or modify the fields of the widget.

The content editing menu also provides the option to choose whether you prefer to hide the content of all items in the accordion or display only the first item when users first open the widget. In addition, you may choose whether visitors can expand only one item at a time or can view several expanded items at the same time.

Depending on the layout you choose, your accordion widget may have a title icon. The title icon is the icon next to the item title, and may be different across all items. For example, you may want to set add a clock icon next to your event time, or a money icon next to a pricing item.

  2. The design editing menu lets you control the layout and styling of the accordion widget.

Design Editor

To access the design editor:

1. Right-click the widget, and click Edit Design.
2. Edit the design options of the expandable icon. The expandable icon appears on all items in the widget, and corresponds to the icon you click to expand the item.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

Note

• Changing the layout of the accordion widget may override some of the settings you have defined (for example, spacing between items). Check all settings after editing the widget and recreate any ones that are missing after you change the layout.
• When editing the icons, take note of the type of icon you are editing. The title icon is the icon next to the item title on certain layouts.
• Make sure the design settings you define are correct per device. As usual, settings such as spacing (of the whole widget and individual items), width and more are defined per device. For more information, see Edit by Device.