Advanced Accordion Widget

The Advanced Accordion widget gives you far more control over styling, spacing, and layout than the classic accordion widget. It’s perfect for FAQs, toggle content, or multi-section displays where you want a clean, interactive experience—and it looks polished right out of the box.


Preview: https://demo.wocode.com/advanced-accordion


WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it in a row or column where you want the Advanced Tabs widget to appear.

WIDGET CONTENT PANEL

The widget's content panel offers several options for managing its tabs.

  • Tabs: These are the individual tabs within the widget. Click the three dots next to a tab to rename, duplicate, or delete it.


  • + Add Item: Use this button to create new items as needed.

DESIGN SETTINGS

The Design panel offers a wide range of customization options for nearly every element of the widget.

Layout: This section manages the widget’s structure and includes the following toggles:

  • Show one expanded item at a time: Limits expansion to one item at a time.
  • Show first item expanded: Automatically expands the first item by default.

Item: This section controls the visual styling of individual components:

  • Title Text: Customize the appearance of item titles.
  • Toggle Icon: Adjust the size, color, and styling of the toggle icon.
  • Header: Change the header color and optionally add a border.

Adding/Modifying Content

Each accordion panel functions like a column, allowing you to add and edit content in the same way. You can drag new content or widgets into a tab and rearrange items within it just as you would in a standard column layout.


Connected Data Content

The Advanced Accordion widget can be connected to a collection. This lets you update content in one place and have everything in the widget populate automatically from that collection.

To connect the widget:

  1. Select the Advanced Accordion widget on the canvas.
  2. Click the "More Actions" (three dots) button and select Connect to Data.
  3. Choose the collection you want to connect.

To connect the content inside the widget:

Once the widget is connected, open the accordion panel and select each element within the accordion (such as headings, text, and images) and repeat the same steps to link it to its matching field in the collection.