Overview
Accordion 09 is an interactive FAQ-style accordion component built in Bubble.io. It displays multiple collapsible sections, each containing a question title and an answer text. Users can click on any accordion item to expand or collapse its content. The component uses custom states to track which item is currently open, toggling visibility accordingly. It is suitable for FAQ pages, help sections, or any content that benefits from progressive disclosure.
How to use
Open the Brikl panel
Navigate to the Elements category in the Brikl panel.
Copy the component
Find Accordion 09 and click Copy.
Paste into your editor
Paste it into your Bubble canvas with Cmd + V (Mac) or Ctrl + V (Windows),
or right-click on the canvas and select Paste.
States
This component includes conditional states that automatically change its appearance.
| State | Trigger | Visual effect |
|---|
| Item 01 Open | User clicks on Toggle 01 accordion header | The content group for accordion item 01 expands or collapses based on the custom state value |
| Item 02 Open | User clicks on Toggle 02 accordion header | The content group for accordion item 02 expands or collapses based on the custom state value |
| Item 03 Open | User clicks on Toggle 03 accordion header | The content group for accordion item 03 expands or collapses based on the custom state value |
| Item 04 Open | User clicks on Toggle 04 accordion header | The content group for accordion item 04 expands or collapses based on the custom state value |
These states are handled natively by Bubble and require no additional setup.
They will work automatically once the component is pasted into your editor.
Responsive
This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.
Workflows
This component includes pre-built workflows.
| Trigger | Action |
|---|
| Toggle 01 header group clicked | Sets custom state ‘accordion_item_’ on the container group to toggle item 01 open or closed (sets to 0 if already open, otherwise sets to item 01 value) |
| Toggle 02 header group clicked | Sets custom state ‘accordion_item_’ on the container group to toggle item 02 open or closed (sets to 0 if already open, otherwise sets to item 02 value) |
| Toggle 03 header group clicked | Sets custom state ‘accordion_item_’ on the container group to toggle item 03 open or closed (sets to 0 if already open, otherwise sets to item 03 value) |
| Toggle 04 header group clicked | Sets custom state ‘accordion_item_’ on the container group to toggle item 04 open or closed (sets to 0 if already open, otherwise sets to item 04 value) |
These workflows are included when you use the Copy with Workflows option in the Brikl panel.
Requirements
| |
|---|
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
| Platform | Supported |
|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component requires a Starter plan.
