Accordion

A collapsible container with multiple sections. Users click section headers to expand and collapse content panels.

Properties

Property	Type	Default	Description
sections	array	[{id: 'sec1', label: 'Section 1'}, {id: 'sec2', label: 'Section 2'}]	Array of section definitions. Each section has an id (unique identifier) and label (header text).

Sections are configured via the property panel. Each section entry has:

• id -- a unique string identifier for the section.
• label -- the text shown on the collapsible section header.

Container

This widget is a container. Each section acts as a separate container zone -- drag widgets into the active section to populate it. Switch sections in the builder to add content to each one.

Example

An FAQ section:

sections:
  - id: faq1, label: How do I create an account?
  - id: faq2, label: What payment methods do you accept?
  - id: faq3, label: How can I contact support?

Place a Text widget inside each section with the answer content.

Tips

• Add or remove sections by editing the sections array in the property panel.
• Section IDs must be unique within the widget.
• Only one section is expanded at a time -- clicking a new section collapses the previous one.
• Style the section headers and content areas via the Design tab (font, background color, padding, borders).
• Accordions work well for FAQs, settings panels, and any content where showing everything at once would be overwhelming.