Overview
Accordion 02 is an interactive FAQ-style component built in Bubble.io that displays three expandable/collapsible items. Each item consists of a clickable row with a bold question title and a plus icon, toggling the visibility of an answer text below. It uses custom states to track which item is open, allowing users to reveal or hide content on demand. Ideal for FAQ sections, feature explanations, or any structured Q&A layout.
How to use
Open the Brikl panel
Navigate to the Elements category in the Brikl panel.
Copy the component
Find Accordion 02 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 |
|---|
| Toggle 01 Open | User clicks the first accordion row (GP - Accordion 02 / Toggle 01) | The content group for item 01 becomes visible, revealing the answer text below the title |
| Toggle 01 Closed | User clicks the first accordion row again when already open | The content group for item 01 is hidden, collapsing the answer text |
| Toggle 02 Open | User clicks the second accordion row (GP - Accordion 02 / Toggle 02) | The content group for item 02 becomes visible, revealing the answer text |
| Toggle 02 Closed | User clicks the second accordion row again when already open | The content group for item 02 is hidden, collapsing the answer text |
| Toggle 03 Open | User clicks the third accordion row (GP - Accordion 02 / Toggle 03) | The content group for item 03 becomes visible, revealing the answer text |
| Toggle 03 Closed | User clicks the third accordion row again when already open | The content group for item 03 is hidden, collapsing the answer text |
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 |
|---|
| GP - Title & Icon / Toggle 01 clicked | Sets custom state ‘accordion_item_’ on the container: if item_01_ equals current value, resets it to 0 (close); otherwise sets it to item_01_ value (open) |
| GP - Title & Icon / Toggle 02 clicked | Sets custom state ‘accordion_item_’ on the container: if item_02_ equals current value, resets it to 0 (close); otherwise sets it to item_02_ value (open) |
| GP - Title & Icon / Toggle 03 clicked | Sets custom state ‘accordion_item_’ on the container: if item_03_ equals current value, resets it to 0 (close); otherwise sets it to item_03_ value (open) |
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.
