# FAQ accordion

> Questions and plain-text answers in a compact accordion. Visitors open the answers they need with disclosure buttons.

- ID: `cmp_faq_accordion_001`
- Slug: `faq-accordion-01`
- Version: `1.0.0` (current)
- Status: published
- Published: 2026-09-16
- Updated: 2026-09-17
- Available versions: `1.0.0`
- Kind: section
- Primary category: `help`
- Detail page: https://pagesugar.com/components/faq-accordion-01
- Preview: https://pagesugar.com/preview/faq-accordion-01

## Variants

| Variant | Label | Default | Artifact digest |
| --- | --- | --- | --- |
| `neutral` | Neutral | yes | `sha256-23239c116daa334fa144c0d3418b21b6a5df93bc18f332c156ce8b0e0dddcfe0` |

## Runtime and compatibility

- Runtime: svelte
- Svelte: 5
- SvelteKit required: no (portable Svelte component)
- Tailwind CSS: 4
- SSR: supported
- Requires client-side JavaScript: yes
- Integration level: local-interaction
- Appearance modes: light
- Suggested directory: `src/lib/components/faq-accordion-01`

## Dependencies

No third-party runtime packages.

## Services

No external services required.

## Usage

Supply questions and plain-text answers. Open/closed state is local to each instance and is not persisted, synced to the URL or reported through callbacks. No additional runtime packages beyond Svelte and Tailwind CSS and no backend.

Required props: `items`, `title`

```svelte
<!-- Illustrative content: replace example claims, prices and links before publishing. -->
<script lang="ts">
	import FaqAccordion, { type FaqItem } from '$lib/components/faq-accordion-01/FaqAccordion.svelte';

	const items: FaqItem[] = [
		{ question: 'Can I change plans later?', answer: 'Yes. Plan changes apply from your next billing date.' },
		{ question: 'Is there a free trial?', answer: 'Every plan includes a 14-day trial.' }
	];
</script>

<FaqAccordion title="Frequently asked questions" {items} defaultOpen={[0]} />
```

Limitations:

- Answers are plain text; edit the source to render rich content or snippets.
- Collapsed answers are hidden until JavaScript runs; content in closed panels is not reachable without client-side hydration.
- defaultOpen is read once at creation; changing multiple later does not collapse answers already open, and open state is tracked by item position. Remount (e.g. with {#key}) after changing multiple or reordering items.

## Usage guide

### Using the accordion

Copy `FaqAccordion.svelte` into `src/lib/components/faq-accordion-01/`. The quick-start example and props reference describe its inputs. Replace the illustrative questions and answers with your actual product information.

#### Managing open answers

Clicking a question, or pressing Enter or Space on its button, toggles the answer. With `multiple` off, opening another answer closes the previous one.

`defaultOpen` is read once when the component is created. Changing `multiple` later does not collapse answers already open. State is tracked by index: remount the component with a Svelte `{#key}` block after reordering `items` or changing the interaction mode.

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `items` | `FaqItem[]` | yes |  | Questions and plain-text answers ({ question: string; answer: string }) in display order. |
| `title` | `string` | yes |  | Section heading text. |
| `description` | `string` | no |  | Optional introductory paragraph under the heading. |
| `headingLevel` | 2 \| 3 \| 4 \| 5 | no | `2` | Level of the section heading; each question is wrapped in a heading one level lower. |
| `multiple` | `boolean` | no | `false` | When false, opening one answer closes the others. When true, answers open independently. |
| `defaultOpen` | `number[]` | no | `[]` | Zero-based indexes of answers expanded on first render. Only the first index is used when multiple is false. |

## Customization

Change content through props and edit Tailwind classes in the source for colours, spacing and dividers. No colour tokens are declared.

- Content: pass items as { question, answer }; line breaks in answers are preserved.
- Headings: set headingLevel so the section fits the page outline; questions use the next level down.
- Behaviour: set multiple to allow several open answers; use defaultOpen to expand answers on load.
- Colours: text and divider colours are zinc utilities on the section, buttons and panels; replace them together and keep body text at 4.5:1 contrast.
- Width: the content column uses max-w-3xl; change it on the inner wrapper.
- Rich answers: change the answer type and replace the paragraph in the panel with your own markup or a snippet prop.

No public CSS variables.

## Accessibility

- Follows the WAI-ARIA disclosure/accordion pattern: each question is a native button inside a heading, with aria-expanded and aria-controls pointing at its answer panel.
- Buttons are operable with Enter and Space and appear in normal Tab order; collapsed panels use the hidden attribute so their content is removed from the accessibility tree.
- IDs are derived from $props.id(), so several accordions on one page never collide and server and client markup match.
- The chevron is decorative and hidden from assistive technology; state is conveyed by aria-expanded.
- Focus is shown with a visible outline; the chevron animation is disabled when reduced motion is requested.

Known limitations:

- Arrow-key navigation between questions is not implemented (it is optional in the APG accordion pattern).

## License

- Declared source: MIT
- Default license approval is pending. See https://pagesugar.com/docs/license.

## Artifacts

### Neutral (`neutral`) (default)

- Artifact digest: `sha256-23239c116daa334fa144c0d3418b21b6a5df93bc18f332c156ce8b0e0dddcfe0`
- Entry: `FaqAccordion.svelte`
- Receipt: https://pagesugar.com/artifacts/cmp_faq_accordion_001/1.0.0/neutral/sha256-23239c116daa334fa144c0d3418b21b6a5df93bc18f332c156ce8b0e0dddcfe0/manifest.json
- Bundle: https://pagesugar.com/artifacts/cmp_faq_accordion_001/1.0.0/neutral/sha256-23239c116daa334fa144c0d3418b21b6a5df93bc18f332c156ce8b0e0dddcfe0/bundle.zip (3643 bytes, sha256 `0927c2714beb7bd3876d7c035cfa585a227bcbce1f52d39ca1e757615c5cec3b`)

Files:

- `FaqAccordion.svelte` (entry, 2751 bytes): https://pagesugar.com/artifacts/cmp_faq_accordion_001/1.0.0/neutral/sha256-23239c116daa334fa144c0d3418b21b6a5df93bc18f332c156ce8b0e0dddcfe0/source/FaqAccordion.svelte