Accordion 12

Overview

Accordion 12 is an interactive FAQ-style accordion component featuring multiple collapsible items. Each item displays a question title with a plus icon that, when clicked, expands to reveal an answer. It uses custom states to track which accordion item is open, toggling visibility of content panels accordingly. Ideal for FAQ sections, product details, or any structured Q&A layout in a Bubble app.

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 the Toggle 01 accordion row	Content group for item 01 becomes visible; plus icon may change; state resets if already open
Item 02 Open	User clicks the Toggle 02 accordion row	Content group for item 02 becomes visible; state resets if already open
Item 03 Open	User clicks the Toggle 03 accordion row	Content group for item 03 becomes visible; state resets if already open
Item 04 Open	User clicks the Toggle 04 accordion row	Content group for item 04 becomes visible; state resets if already open

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 group clicked	Sets custom state ‘accordion_item_’ on the container: if item_01_ equals current value, resets to 0; otherwise sets to item_01_ value
Toggle 02 group clicked	Sets custom state ‘accordion_item_’ on the container: if item_02_ equals current value, resets to 0; otherwise sets to item_02_ value
Toggle 03 group clicked	Sets custom state ‘accordion_item_’ on the container: if item_03_ equals current value, resets to 0; otherwise sets to item_03_ value
Toggle 04 group clicked	Sets custom state ‘accordion_item_’ on the container: if item_04_ equals current value, resets to 0; otherwise sets to item_04_ value

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