# FAQ Accordion

> Render an Alpine-powered FAQ accordion.

Canonical HTML: https://press.varavel.com/docs/shortcodes/faq-accordion/
Markdown: https://press.varavel.com/docs/shortcodes/faq-accordion/index.md

`faq_accordion` renders a bordered FAQ section with small Alpine.js state for expanding answers.

## When to Use

Use it for objections, pricing questions, implementation details, or any set of questions that would otherwise take too much vertical space.

## Usage

```markdown
{{/* faq_accordion(
title="Questions",
q_1="Do I need a frontend build step?",
a_1="No. VaraPress ships bundled assets for consuming sites."
) */}}
```

## Live Example

{{ faq_accordion(
container="md",
title="Common questions",
q_1="Do I need a frontend build step?",
a_1="No. VaraPress ships bundled assets for consuming sites.",
q_2="Can I use shortcodes in docs?",
a_2="Yes. Use them when they make the explanation clearer."
) }}

## Parameters

| Parameter     | Description                                                |
| ------------- | ---------------------------------------------------------- |
| `container`   | Inner content width for the FAQ section.                   |
| `eyebrow`     | Small uppercase label above the heading.                   |
| `title`       | Section heading.                                           |
| `description` | Supporting copy below the heading.                         |
| `q_N`         | Question text for item `N`. Supports `q_1` through `q_10`. |
| `a_N`         | Answer text for item `N`. Supports `a_1` through `a_10`.   |
| `bg`          | Full-width section background token.                       |
| `class`       | Additional CSS classes on the outer section.               |