Learn how to use the Accordion widget in Booking Website Pro to organize FAQs, product highlights, or other expandable content in a compact format.
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.
Dynamic Content
This widget can also display dynamic pages as well as specific collections or product information using Inline Binding.
For more information on widgets and the widgets library, see Widgets: Library and Overview.
Content Editor
To access the content editor, click the element to open the floating menu, then click the option for the content editor.
Accordion Setup Options
- Items. Click an item to configure its content, click the duplicate icon to duplicate an item, or click +Add Item.
-
Display Rules.
- Show one expanded item at a time. Set it so visitors can expand only one item at a time or can view several expanded items at the same time.
- Show the first item expanded. Set it to show the first item expanded or have them all collapsed.
-
SEO.
- Enable FAQ Schema. 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.
- Textual Content. Title/question and description. The long text field provides various text formatting options, such as italicizing, bolding, or underlining text.
- Button. If a button isn't desired, click the eye icon to hide it.
-
Media (image or video). Add desired media. Select Click to add media to open the Media Library.
- Alt text. Once Media has been added, an Alt text field will appear. Type your own alt text. Repeat for each piece of media in the Accordion or click All Alt Text to view and manage alt text for all site images.
To access the design editor, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.
The following are some of the sections and settings that can be found:
- Layouts. Click the layout thumbnail to select a layout.
-
Title:
- Select the heading type (h1-h6 is available) and style the text as desired.
- Style the title bar as desired (background and border).
- Expansion icon. While the icon itself can't be changed, you can customize its elements, such as adjusting its size and color, as well as modifying its background.
- Media. If images will be included in the content of the accordion items, configure them here.
- Frame. Various settings can be found in this section, including adjusting the space between items.
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.
- 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.