> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion 02

> Vertical accordion with three toggle rows, each featuring a title, plus icon, and collapsible content.

<Frame>
  ![Accordion 02](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Accordions/accordion-with-plus-minus.png)
</Frame>

## 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

<Steps>
  <Step titleSize="h4" title="Open the Brikl panel">
    Navigate to the **Elements** category in the Brikl panel.
  </Step>

  <Step titleSize="h4" title="Copy the component">
    Find **Accordion 02** and click **Copy**.
  </Step>

  <Step titleSize="h4" title="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**.
  </Step>
</Steps>

## 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                      |

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

## 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) |

<Note>
  These workflows are included when you use the **Copy with Workflows** option in the Brikl panel.
</Note>

## Requirements

|             |                       |
| ----------- | --------------------- |
| License     | Starter plan required |
| Plugins     | None                  |
| Custom code | Not required          |

## Platforms

| Platform | Supported |
| -------- | --------- |
| Web      | ✅         |
| Mobile   | ✅         |

## License

<Note>
  This component requires a **Starter** plan.
</Note>