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

# Faq 03

> Two-column FAQ layout with categorized accordion sections, headings, and toggle icons.

<Frame>
  ![Faq 03](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Faq/faq-collapsible-sections.png)
</Frame>

## Overview

FAQ 03 is a marketing component that displays frequently asked questions organized into categories (e.g., General). Each question functions as an accordion item: clicking a question expands or collapses its answer. The component uses custom states to track which accordion item is open, toggling visibility of answer groups and swapping caret icons accordingly. It is designed for both web and mobile layouts with responsive font and alignment adjustments.

## How to use

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

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

  <Step title="Paste into your editor" titleSize="h4">
    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                                                                                          |
| --------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Accordion Item Open   | User clicks a question group                      | The answer group becomes visible, the caret icon switches from caret-down to caret-up                  |
| Accordion Item Closed | User clicks the same open question group again    | The answer group collapses and hides, the caret icon reverts to caret-down                             |
| Question Hover        | User hovers over a question group                 | The question and icon group opacity reduces to 60% and question text becomes underlined                |
| Mobile Responsive     | Current Page Width is less than or equal to 768px | Font size of the main heading reduces to 30px and alignment adjusts; category label width becomes 100% |

<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 - General Question 01 (FAQ 03) is clicked | Sets the accordion\_item\_ custom state on the General Accordion group: if the current open item matches this question's item number, it resets to 0 (closed); otherwise it sets it to this question's item number (open) |
| GP - General Question 05 (FAQ 03) is clicked | Sets the accordion\_item\_ custom state on the General Accordion group: if the current open item matches this question's item number, it resets to 0 (closed); otherwise it sets it to this question's item number (open) |
| GP - General Question 04 (FAQ 03) is clicked | Sets the accordion\_item\_ custom state on the General Accordion group: if the current open item matches this question's item number, it resets to 0 (closed); otherwise it sets it to this question's item number (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>