Accordion Component

An accessible accordion for collapsible sections. Supports single or multiple open panels and full keyboard navigation.

Add this component

The command below includes <strong>Accordion</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Props

items (array, required) - Array of objects with id, title, and optional content
id (string, optional) - Unique identifier for the accordion
allowMultiple (boolean, optional) - Allow multiple panels open at once (default: false)
defaultExpanded (string | string[], optional) - ID or array of IDs to expand by default (defaults to first item)
class (string, optional) - Additional CSS classes

Item Structure

id (string, required) - Unique identifier for the item
title (string, required) - Heading text for the trigger
content (string, optional) - HTML content for the panel (alternative to using slots)

Basic Usage (Single Open)

By default only one panel is open at a time. Component script runs after DOM ready.

Live Example

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

---
import Accordion from '../components/astro/Accordion.astro';
---

<Accordion
  items={[
    { id: 'one', title: 'Section one' },
    { id: 'two', title: 'Section two' },
    { id: 'three', title: 'Section three' },
  ]}
>
  <div><p>Content for section one</p></div>
  <div><p>Content for section two</p></div>
  <div><p>Content for section three</p></div>
</Accordion>

<!-- Rizzo CSS + accordion script from package/vanilla docs. Script runs on DOMContentLoaded. -->
<div class="accordion" data-accordion="faq" data-allow-multiple="false">
  <div class="accordion__item">
    <h3 class="accordion__heading">
      <button type="button" class="accordion__trigger accordion__trigger--expanded" aria-expanded="true" aria-controls="faq-panel-one">Section one</button>
    </h3>
    <div id="faq-panel-one" class="accordion__panel accordion__panel--expanded">Content for section one</div>
  </div>
  <div class="accordion__item">
    <h3 class="accordion__heading">
      <button type="button" class="accordion__trigger" aria-expanded="false" aria-controls="faq-panel-two">Section two</button>
    </h3>
    <div id="faq-panel-two" class="accordion__panel" hidden>Content for section two</div>
  </div>
</div>

<script>
  import { Accordion } from '$lib/rizzo';
</script>

<Accordion
  items={[
    { id: 'one', title: 'Section one' },
    { id: 'two', title: 'Section two' },
    { id: 'three', title: 'Section three' },
  ]}
>
  <div><p>Content for section one</p></div>
  <div><p>Content for section two</p></div>
  <div><p>Content for section three</p></div>
</Accordion>

<script setup>
import Accordion from '@/components/rizzo/Accordion.vue';
</script>

<template>
  <Accordion
    :items="[
      { id: '1', title: 'Section 1', content: '<p>Content 1.</p>' },
      { id: '2', title: 'Section 2', content: '<p>Content 2.</p>' },
    ]"
    :allow-multiple="false"
    default-expanded="1"
  />
</template>

import { Accordion } from './components/react';

<Accordion
  items={[
    { id: '1', title: 'Section 1', content: '<p>Content 1.</p>' },
    { id: '2', title: 'Section 2', content: '<p>Content 2.</p>' },
  ]}
  allowMultiple={false}
  defaultExpanded="1"
/>

Multiple Panels Open

Set allowMultiple to true to allow multiple panels to be open at once:

Live Example

<Accordion
  allowMultiple
  items={[
    { id: 'a', title: 'First' },
    { id: 'b', title: 'Second' },
    { id: 'c', title: 'Third' },
  ]}
>
  <div><p>First panel content</p></div>
  <div><p>Second panel content</p></div>
  <div><p>Third panel content</p></div>
</Accordion>

With Content Property

You can provide panel content directly in the item object:

Live Example

A design system and component library built with semantic CSS variables and Astro.

<Accordion
  items={[
    { id: 'faq1', title: 'Question one', content: '<p>Answer one</p>' },
    { id: 'faq2', title: 'Question two', content: '<p>Answer two</p>' },
  ]}
/>

Default Expanded

Control which panel(s) are open initially with defaultExpanded:

Live Example

<Accordion
  defaultExpanded="second"
  items={[
    { id: 'first', title: 'First' },
    { id: 'second', title: 'Second' },
    { id: 'third', title: 'Third' },
  ]}
>
  <div><p>First</p></div>
  <div><p>Second</p></div>
  <div><p>Third</p></div>
</Accordion>

Features

Collapsible sections - Expand and collapse panels with smooth transitions
Single or multiple open - allowMultiple controls whether only one or several panels can be open
Keyboard navigation - Arrow Up/Down, Home, End, Enter, and Space
ARIA - aria-expanded, aria-controls, region, aria-labelledby
Content from props or slots - Use content (HTML string) or pass children for panel content
Theme-aware - Uses design system variables

Keyboard Navigation

Arrow Down - Focus next trigger
Arrow Up - Focus previous trigger
Home - Focus first trigger
End - Focus last trigger
Enter / Space - Toggle focused panel

Other frameworks: Vanilla · Svelte · Vue · React

Accordion Component — Astro