The accordion 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 s:
- In the left panel, click Widgets.
- Click and drag the Accordion into your site.
To learn more about adding s to your site, see Add Widgets.
Content Editor
Adding the opens the content editor. In this menu, you can add or modify the fields of the .
- Show first item expanded or Only show one item expanded. The content editor also provides the option to select whether you prefer to hide the content of all items in the accordion or display only the first item when users first open the . 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.
- Title icon. Depending on the layout you choose, your accordion 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.
- Generate FAQ Schema Markup. Enable this toggle to generate FAQ schema markup once per page. To test if your schema was generated properly and see a preview, use the Rich Results Test.
The design editor lets you control the layout and styling of the accordion widget.
Design Editor
To access the design editor:
- Right-click the , and click Edit Design.
- Edit the design options of the expandable icon. The expandable icon appears on all items in the , and corresponds to the icon you click to expand the item.
For information about design options that are not specific to this (for example, layout, style, or spacing), see Widget Design.
- Changing the layout of the accordion may override some of the settings you have defined (for example, spacing between items). Check all settings after editing the 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 and individual items), width and more are defined per device. For more information, see Edit by Device.