# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/collapsible-group.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.