Accordion Widget

Accordion Widget

The accordion widget assists visitors in quickly finding the information they seek. When you add it to your sites, visitors will no longer have to scroll through blocks of content that they aren't interested in. Instead, they can be presented with a list of questions or titles and simply select the ones they want to learn more about. Create FAQs, product highlights, or upcoming events that are concise and easy to read.

To include accordion widgets:

1. Click Widgets in the left panel.
2. Drag the Accordion widget into your website.

For more information, see Add Widgets.

Content Editor

When you add a widget, the content editor appears. You can add or change the widget's fields from this menu.

• Items. Configure the Title, Description, and Title Heading Type by clicking an item. There are header tags available to help search engines identify your text. It is recommended that you use H3 as the Title Heading Type.
• Show the first item expanded or Only show one item expanded.  The content editor also lets you choose whether to hide the content of all accordion items or display only the first item when users first open the widget. You can also specify whether visitors can view only one expanded item at a time or several expanded items at the same time.
• Title icon. Your accordion widget may have a title icon, depending on the layout you select. The title icon is the icon next to the item title, and it may differ between items. You might want to add a clock icon next to your event time, or a money icon next to a pricing item, for example.
• Generate FAQ Schema Markup. Enabling this toggle causes the FAQ schema markup to be generated once per page. Use the Rich Results Test to see if your schema was properly generated and to see a preview.

The accordion widget's layout and styling can be customised using the design editor.

Design Editor

To gain access to the design editor, follow these steps:

1. Right-click the widget and click Edit Design from the menu that appears.
2. Change the design of the expandable icon. The expandable icon is displayed on all widget items and corresponds to the icon you click to expand the item.

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

• Changing the layout of the accordion widget may cause some of the settings you've defined to be overridden (for example, spacing between items). After editing the widget, go through all of the settings and recreate any that are missing after changing the layout.
• Take note of the type of icon you are editing when editing it. On some layouts, the title icon is the icon next to the item title.
• Check that the design settings you define are correct for each device. As is customary, settings such as spacing (of the entire widget and individual items), width, and other parameters are defined per device. See Edit by Device for more information.