The Accordion widget is used in web design to manage and display large amounts of content in a condensed form. It helps to save space on web pages by allowing users to expand and collapse content sections.
Note:
The Accordion widget can be enhanced by activating the "Nested Elements” feature. When this feature is enabled, the Accordion widget gains additional functionality previously covered by the Toggle widget, essentially merging the two widgets' capabilities. When you turn on the Nested Elements feature, the Toggle widget will be replaced. However, any Toggle widgets you already have will still work and can be edited.
Differences between Toggle and Accordion widgets
The default Accordion widget and the Toggle widget are similar, but they have two main differences:
- When you first visit a page, the first item in an Accordion widget is already open, but all the other items are closed. In contrast, with a Toggle widget, every item starts off closed.
- In an Accordion widget, you can only have one item open at a time. Opening a new item will automatically close the one that was open before. With a Toggle widget, you can open multiple items at the same time and they will stay open.
Adding Accordion widget
- Drag the Accordion widget onto your canvas where you want it to appear.
- The widget typically starts with two items: Accordion #1 and Accordion #2. You can edit these or add more items.
- Click on an accordion item to start editing.
Content tab
- In the Title and Content field, enter the title for the item and a description. You can enhance the accordion by adding images and links to make the text clickable.
- You can add more accordion items or delete the existing ones depending on your needs.
- In the Icon field, choose how you want to represent the action of expanding an accordion item (None, Upload SVG, or Icon Library).
- In the Active Icon field, choose the icon for when an accordion item is open and needs to be collapsed. The options are the same as for the expanding icon (None, Upload SVG, or Icon Library). The Icon Library will similarly show a Recommended tab with suitable icons for the collapsing action.
- In the Title HTML Tag field, specify the HTML tag to use for the accordion titles.
- Use the FAQ Schema option to turn on or off schema markup. Enabling this can help improve SEO by making your accordion content more accessible to search engines in a structured format.
Style tab
Accordion
- Border Width: Adjust the thickness of the border around the entire accordion and between each item.
- Border Color: Select a color for the border surrounding the accordion and the separators between items.
Title
- Background: Choose a background color for the title area of each accordion section.
- Color: Set the color for the text in non-active titles.
- Active Color: Set the color for the text in the active (currently expanded) title.
- Typography: Configure font, size, weight, and other typography settings for the title text. For a detailed guide, see Typography settings.
- Text Stroke: Use the 🖋️ icon to apply a stroke effect to the title text. This adds an outline effect to the letters.
- Text Shadow: Use the 🖋️ icon to add a shadow effect behind the title text, enhancing visibility and depth.
- Padding: Adjust the space inside the borders of the title area, around the text.
Icon
- Alignment: Set the position of the icon relative to the title.
- Color: Choose a color for the icon.
- Active Color: Choose a color for the icon when the accordion item is active.
- Spacing: Control the distance between the icon and the title text.
Content
- Background: Select a background color for the content area of each accordion item.
- Color: Choose the color for the text within the content area.
- Typography: Adjust the typography settings for the content text, similar to the title.
- Text Shadow: Use the 🖋️ icon to add a shadow to the content text, which can make it more readable.
- Padding: Set the padding inside the content area, creating space around the text.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.
The settings for the Accordion widget offer a wide range of customization options, enabling you to tailor the widget to meet the specific design and functional needs of your website. This flexibility allows you to create a cohesive and user-friendly interface that enhances the overall user experience.