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

> Vertical accordion with toggle groups, caret icons, bold titles, and gray body text on white cards.

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

## Overview

Accordion 09 is an interactive FAQ-style accordion component built in Bubble.io. It displays multiple collapsible sections, each containing a question title and an answer text. Users can click on any accordion item to expand or collapse its content. The component uses custom states to track which item is currently open, toggling visibility accordingly. It is suitable for FAQ pages, help sections, or any content that benefits from progressive disclosure.

## 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 09** 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                                                                                |
| ------------ | ----------------------------------------- | -------------------------------------------------------------------------------------------- |
| Item 01 Open | User clicks on Toggle 01 accordion header | The content group for accordion item 01 expands or collapses based on the custom state value |
| Item 02 Open | User clicks on Toggle 02 accordion header | The content group for accordion item 02 expands or collapses based on the custom state value |
| Item 03 Open | User clicks on Toggle 03 accordion header | The content group for accordion item 03 expands or collapses based on the custom state value |
| Item 04 Open | User clicks on Toggle 04 accordion header | The content group for accordion item 04 expands or collapses based on the custom state value |

<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                                                                                                                                                     |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Toggle 01 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 01 open or closed (sets to 0 if already open, otherwise sets to item 01 value) |
| Toggle 02 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 02 open or closed (sets to 0 if already open, otherwise sets to item 02 value) |
| Toggle 03 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 03 open or closed (sets to 0 if already open, otherwise sets to item 03 value) |
| Toggle 04 header group clicked | Sets custom state 'accordion\_item\_' on the container group to toggle item 04 open or closed (sets to 0 if already open, otherwise sets to item 04 value) |

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