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, etc.
Adding an Accordion Widget
To add the Accordion widget:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Open the Widgets list on the 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 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:
- 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:
- 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 toggle. 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.
- Expand Visibility and modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).
Once you have completed Styles, Content, and Settings, proceed to publish the changes. The following FAQ sample is created with an Accordion widget.
Configuring the Accordion Widget Elements
To design the appearance and behavior of the Accordion widget, click the widget to activate its elements:
- 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 Header
Customize the heading levels for the accordion headers by clicking the Title element within the Accordion Header. Select the corresponding heading level from Typography on the Property Panel. By default, the Title element is set to H5. - Accordion Content
Hold down the CTRL/Cmd key to add and manage any widget within the Accordion Content.
💡 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.