The Accordion widget is a list of panels that hide or reveal additional content when selected/opened with the expansion possibility. It serves as a valuable element for tidily grouping complex content, collapsing the page to minimize scrolling, with the insurance of focus on the specific content. The widget helps to reduce cognitive load, increase readability, and provide clarity to your website.
You can use the widget in FAQs, Ts and Cs, service options, checklists, work plans, agenda forms, and so forth.
Adding an Accordion Widget
To add the Accordion widget:
- Go to the Visual Editor from Channels on the Dashboard Left Panel.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Essentials grouping.
- Drag and drop the Accordion widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Accordion Widget
To design the appearance and behavior of the Accordion widget, click the widget to activate its Property Panel:
- Accordion Item - click the arrow at the top right of the item to expand or collapse the Accordion Item property and view the added widgets.
- Accordion Content - to add and manage any widget within the Accordion Content, hold down the CTRL/Cmd key.
To configure the Accordion widget Styles, Content, and Settings:
- Go to widget Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
- Go to Content and make the necessary configuration of widget content, specifically:
- add a new item (panel) inside the widget (there are three items by default);
- rename, delete, and reorder the panels by dragging them from the left-side dotted area.
3. Go to Settings and modify the widget settings, specifically:
- change the icon. Icon allows you to add or change the icon next to the item that best suits your website design. To do so:
- Click Change Icon.
- Go to General Icons and select the corresponding icon from the list.
- Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
- change the behavior of the item from the Sections by Default. The default state is the Open First One;
- enable/disable the Auto Collapse Others. With the Auto Collapse Others toggle enabled, every section, except the one in use, should be collapsed when expanding any Accordion section;
- apply easing effects for smooth transitions when items are clicked in/out, and specify the duration for these transitions.
- modify the widget visibility on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions (see Visibility Settings).
Once you have done with Styles, Content, and Settings, proceed to publish the changes. The following FAQ sample is created with an Accordion widget.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.