Components

Accordion

Collapsible sections for FAQs and organized content

Accordion components display collapsible content sections, useful for FAQs and organizing information.

Basic Usage

<SimpleAccordion client:load items={[
  { title: "What is Barodoc?", content: "Barodoc is a documentation framework..." },
  { title: "How do I get started?", content: "Install with pnpm add @barodoc/core..." },
  { title: "Is it free?", content: "Yes, Barodoc is open source..." }
]} />

With Icons

🚀

⚙️

📦

<SimpleAccordion client:load items={[
  { title: "Getting Started", content: "Follow our quickstart guide...", icon: "🚀" },
  { title: "Configuration", content: "Customize your documentation...", icon: "⚙️" },
  { title: "Deployment", content: "Deploy your documentation...", icon: "📦" }
]} />

Multiple Open

Allow multiple items to be open simultaneously with type="multiple":

<SimpleAccordion client:load type="multiple" items={[
  { title: "Frontend", content: "React, Vue, Svelte..." },
  { title: "Backend", content: "Node.js, Python, Go..." },
  { title: "Database", content: "PostgreSQL, MySQL, MongoDB..." }
]} />

Default Open

Set initially open items with defaultValue:

This is open by default.

<SimpleAccordion client:load defaultValue="item-1" items={[
  { title: "First Item", content: "This is closed by default." },
  { title: "Second Item", content: "This is open by default." },
  { title: "Third Item", content: "This is also closed by default." }
]} />

Props

itemsAccordionItem[]required

Array of accordion items (see Accordion Item below)

type'single' | 'multiple'default: 'single'

Whether one or multiple items can be open at once

collapsiblebooleandefault: true

Allow closing all items when type is “single”

defaultValuestring | string[]

Initially open item(s) - use “item-0”, “item-1”, etc.

client:loaddirectiverequired

Required Astro directive for client-side interactivity

Accordion Item

Each item in the items array:

titlestringrequired

Accordion header text

contentstringrequired

Content shown when accordion is expanded

iconstring

Optional emoji or icon to display