# Collapsible Group

Create expandable accordion sections from your database -- perfect for FAQs, settings pages, product details, and any screen where you need to organize content into collapsible sections. Bind a collection to automatically generate sections with a title and body, then customize fonts, colors, and icons to match your app.

## Getting Started

Add the Collapsible Group component to your screen. Connect a collection under **What items should be displayed?**, then map your title and body fields. Each record becomes a collapsible section -- tap the header to expand or collapse. By default, the component shows placeholder sections in the editor so you can see how it looks.

## Settings

### Items (Data Binding)

Connect your collection by selecting it under **What items should be displayed?**. Then map these fields:

* **Section Title** -- The text field to display as the section header (e.g., "Question" from a FAQ collection)
* **Section Body** -- The text field to display when the section is expanded (e.g., "Answer")

### On Section Changed

An action that fires when a user expands or collapses a section. Passes:

* **Section Index** -- The number of the section (starting at 1)
* **Is Expanded** -- Whether the section is now open (true) or closed (false)

## Group Settings

### Open Mode

Control how sections behave when opened:

* **Single Open** (default) -- Only one section can be open at a time. Opening a new section automatically closes the previous one. Best for FAQs and settings.
* **Multi Open** -- Multiple sections can be open simultaneously. Users can expand as many as they want.

### Default All Expanded

When Open Mode is set to Multi Open, toggle this on to start with all sections expanded (default: off).

### Gap Between Sections

Space between each section (0 to 16, default is 8). Set to 0 for a continuous list with dividers.

### Outer Border Radius

Rounding of each section's corners (0 to 16, default is 8).

### Expand Icon

Choose a custom icon for the expand/collapse indicator. Default is a chevron (expand-more) that rotates 180 degrees when expanded.

### Icon Color

Color of the expand/collapse icon (default: #FFFFFF).

### Icon Size

Size of the expand/collapse icon (16 to 36, default is 24).

## Colors

* **Group Background Color** -- Background behind all sections (default: transparent)
* **Divider Color** -- Color of the line between sections when gap is 0 (default: #E0E0E0)
* **Divider Height** -- Thickness of the divider line (0 to 2, default is 1)
* **Header Background Color** -- Background of the section headers (default: #00A898)
* **Body Background Color** -- Background of the expanded body content (default: #FFFFFF)

## Text Formatting

### Title

* **Title Font Size** -- Size of the section header text (12 to 28, default is 16)
* **Title Font Weight** -- Weight of the header text: Light, Regular, Medium, Semi Bold (default), or Bold
* **Title Text Color** -- Color of the header text (default: #FFFFFF)
* **Title Alignment** -- Text alignment: Left (default), Center, or Right

### Body

* **Body Font Size** -- Size of the expanded content text (10 to 22, default is 14)
* **Body Font Weight** -- Weight of the body text: Light, Regular (default), Medium, Semi Bold, or Bold
* **Body Text Color** -- Color of the body text (default: #333333)
* **Body Alignment** -- Text alignment: Left (default), Center, or Right

## Tips & Best Practices

* **Use Single Open mode for FAQs.** It keeps the screen clean by closing the previous answer when a new question is tapped.
* **Set Gap Between Sections to 0** and use dividers for a classic FAQ list look. Set it to 8 or higher for a card-style layout.
* **Use Multi Open mode for settings pages** where users may need to reference multiple sections at once.
* **Keep section titles short** -- they display on a single line (or two lines max) with the expand icon on the right.
* **Combine with a search bar** above the collapsible group to let users filter sections. Use visibility conditions on the list to filter by the search term.

## Example Use Cases

* **FAQ Page:** Connect a "FAQs" collection with "Question" and "Answer" fields. Use Single Open mode with a teal header and white body for a clean Q\&A layout.
* **Settings Screen:** Connect a "Settings Categories" collection. Use Multi Open mode so users can expand multiple categories. Style with subtle colors and small gap.
* **Product Specs:** Connect a "Specifications" collection with "Feature" and "Details" fields. Use card-style layout with border radius and gaps between sections.
* **Course Curriculum:** Connect a "Modules" collection with "Module Title" and "Description" fields. Students can expand modules to see what's covered.
* **Restaurant Menu:** Connect a "Menu Categories" collection with "Category" and "Items" fields. Diners tap a category to see the dishes.