Advanced Tabs Widget

The Advanced Tabs widget gives you far more control over styling, spacing, and layout than the classic tabs 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-tabs

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 Tab: Use this button to create new tabs as needed.

DESIGN SETTINGS

The Design panel offers a wide range of customization options for nearly every element of the widget. Most settings are clearly labeled by function and are self-explanatory, so we won’t cover each one individually here, except for two key sections:

  • Tab Default State: Controls the widget’s appearance before any user interaction.
  • Tab Hover & Selected State: Controls how the widget looks when hovered over or actively selected.

Adding/Modifying Content

Each tab 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 Tabs 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 Tabs 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, select each element within the tab (such as headings, text, and images) and repeat the same steps to link it to its matching field in the collection.