Overview
Accordion 05 is a FAQ-style accordion component featuring multiple collapsible toggle items. Each item displays a bold question title, a sub-header text, and a caret icon that indicates open/closed state. Clicking a toggle reveals or hides the answer content below. It is ideal for FAQ sections, onboarding guides, 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 05 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/Closed | Click on Toggle 01 header group | Sets custom state ‘accordion_item_’ on the container; content group for item 01 shows or hides, caret icon rotates |
| Item 02 Open/Closed | Click on Toggle 02 header group | Sets custom state ‘accordion_item_’ on the container; content group for item 02 shows or hides, caret icon rotates |
| Item 03 Open/Closed | Click on Toggle 03 header group | Sets custom state ‘accordion_item_’ on the container; content group for item 03 shows or hides, caret icon rotates |
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 | Checks if custom state ‘item_01_’ equals current value; if open sets it to 0 (closed), otherwise sets it to current item value (open) |
| Toggle 02 header group - clicked | Checks if custom state ‘item_02_’ equals current value; if open sets it to 0 (closed), otherwise sets it to current item value (open) |
| Toggle 03 header group - clicked | Checks if custom state ‘item_03_’ equals current value; if open sets it to 0 (closed), otherwise sets it to current item 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.
