Skip to content
Accordion
Overview
A collapsible accordion container that provides an expandable/collapsible content area with a header button. Uses Alpine.js for toggle functionality and includes smooth animations when enabled.
Common use cases
- Create FAQ sections with expandable questions and answers
- Organize product details or specifications in collapsible sections
- Group related content that can be expanded on demand
- Enable pre-opened option to show content by default
Compatible blocks
The following blocks can be nested within this block:
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals enable pre-opened, enable single open, and visibility | Checkbox (default: false) |
Spacing
| Setting | Description | Options |
|---|---|---|
| Enable internal padding | Adds internal padding to the accordion content | Checkbox (default: true) |
| Enable horizontal padding | Adds horizontal padding around the accordion | Checkbox (default: false) |
| Enable top padding | Adds top padding around the accordion | Checkbox (default: false) |
| Enable bottom padding | Adds bottom padding around the accordion | Checkbox (default: false) |
Color
| Setting | Description | Options |
|---|---|---|
| Color scheme | Controls the background and text colors | • Body (default) |
| Color border | Controls the border color | • Body |
Style
| Setting | Description | Options |
|---|---|---|
| Border position | Controls where borders appear | • None (default) |
Display
| Setting | Description | Options |
|---|---|---|
| Enable pre opened | Opens the accordion by default | Checkbox (default: false) Visible when Show advanced settings is on |
| Enable single open | Allows only one accordion item to be open at a time | Checkbox (default: false) Visible when Show advanced settings is on |
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |