Atlas Forms
Collapsible Panel
The collapsible-panel is a lightweight single-panel variant of the accordion. It has a clickable header that toggles the content between expanded and collapsed states. Use it when you need just one collapsible region, without the complexity of a multi-item accordion.
Minimal Example
{
"id": "advanced-options-panel",
"type": "collapsible-panel",
"order": 10,
"width": "full",
"settings": {
"title": "Advanced Options",
"sectionId": "sec-advanced",
"defaultOpen": false
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
title | string | — | Panel header text |
subtitle | string | — | Secondary text below title in header |
sectionId | string | — | Form section to display when expanded |
defaultOpen | boolean | true | Start expanded (true) or collapsed (false) |
icon | string (FA class) | — | Icon displayed in the panel header |
border | boolean | true | Show a border around the panel |
animateHeight | boolean | true | Animate height transition on expand/collapse |
chevronPosition | left | right | right | Position of the collapse/expand chevron icon |
Collapsed by Default (Optional Section)
{
"id": "tax-exemption-panel",
"type": "collapsible-panel",
"order": 5,
"settings": {
"title": "Tax Exemption Details",
"subtitle": "Complete this section only if you have a tax exemption certificate",
"icon": "fa-solid fa-file-invoice",
"sectionId": "sec-tax-exemption",
"defaultOpen": false
}
}Expanded by Default (Important Section)
{
"id": "emergency-contact-panel",
"type": "collapsible-panel",
"order": 8,
"settings": {
"title": "Emergency Contact",
"icon": "fa-solid fa-phone-volume",
"sectionId": "sec-emergency",
"defaultOpen": true,
"border": true
}
}Collapsible Panel vs Card Container vs Accordion
| Control | Items | Collapsible | Use When |
|---|---|---|---|
collapsible-panel | 1 | Yes | Single optional/expandable section |
card-container | 1 | Optional | Always-visible card; can add collapse toggle |
accordion | 2+ | Yes | Multiple collapsible sections in sequence |
Collapsible Panel and Required Fields
If a collapsible panel contains required fields and it starts collapsed (
defaultOpen: false), the form will still show validation errors for those fields on submit attempt. The panel will automatically expand when validation runs and errors are found inside it.