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

Setup

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.