Accordion
Collapsible sections with single/multiple open and keyboard navigation
Same BEM classes and behavior as Astro, Svelte, and React.
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.
npx rizzo-css add Accordion
pnpm dlx rizzo-css add Accordion
npx rizzo-css add Accordion
bunx rizzo-css add Accordion
Live examples
Usage
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: '1', title: 'Section 1', content: '<p>Content 1.</p>' },
{ id: '2', title: 'Section 2', content: '<p>Content 2.</p>' },
]}
allowMultiple={false}
defaultExpanded="1"
/>
<!-- Rizzo CSS + accordion script from package/vanilla docs. -->
<div class="accordion" data-accordion>...</div>
<script>
import { Accordion } from '$lib/rizzo';
</script>
<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"
/>
<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"
/>
Other frameworks: Astro · Vanilla · Svelte · React
npm 
pnpm 
yarn 
bun