Accordion 10

Overview

Accordion 10 is a FAQ-style accordion component consisting of multiple toggleable items. Each item displays a question title with a plus icon; clicking an item expands its answer content while collapsing others. It uses custom states to track which accordion panel is currently open, making it ideal for FAQ sections, onboarding guides, or any content that benefits from progressive disclosure.

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 Toggle 01 header group	Content group for item 01 becomes visible; icon toggles from plus to minus
Item 02 Open	User clicks Toggle 02 header group	Content group for item 02 becomes visible; icon toggles from plus to minus
Item 03 Open	User clicks Toggle 03 header group	Content group for item 03 becomes visible; icon toggles from plus to minus
Item 04 Open	User clicks Toggle 04 header group	Content group for item 04 becomes visible; icon toggles from plus to minus
Collapsed	User clicks an already-open item	Active content group collapses; custom state resets to 0

These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor.

Workflows

This component includes pre-built workflows.

Trigger	Action
Toggle 01 header group – Button Clicked	Sets custom state ‘accordion_item_’ on the container: if item_01_ equals current value, resets to 0 (collapse); otherwise sets to item_01_ value (expand)
Toggle 02 header group – Button Clicked	Sets custom state ‘accordion_item_’ on the container: if item_02_ equals current value, resets to 0 (collapse); otherwise sets to item_02_ value (expand)
Toggle 03 header group – Button Clicked	Sets custom state ‘accordion_item_’ on the container: if item_03_ equals current value, resets to 0 (collapse); otherwise sets to item_03_ value (expand)
Toggle 04 header group – Button Clicked	Sets custom state ‘accordion_item_’ on the container: if item_04_ equals current value, resets to 0 (collapse); otherwise sets to item_04_ value (expand)

These workflows are included when you use the Copy with Workflows option in the Brikl panel.


License	Starter plan required
Plugins	None
Custom code	Not required

License

Starter plan required

Plugins

None

Custom code

Not required

Platform	Supported
Web	✅
Mobile	✅

Platform

Supported

Web

✅

Mobile

✅

Getting Started

All Products

Components

Templates

Legal

Overview

How to use

Open the Brikl panel

Copy the component

Paste into your editor

States

Responsive

Workflows

Requirements

Platforms

License

​Overview

​How to use

Open the Brikl panel

Copy the component

Paste into your editor

​States

​Responsive

​Workflows

​Requirements

​Platforms

​License

Overview

How to use

States

Responsive

Workflows

Requirements

Platforms

License