Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Multi-Level Nested Accordion for Svelte

Help topics in one stack. Account starts open, and each article expands with its own chevron.

UI library: Ark UI

Account, Billing, Integrations, and Security in one bordered stack. Account starts open. Each article inside has a chevron and opens on its own.

Use it for topics and articles in one block. The inner rows are a Collapsible, so they do not share the topic toggle. In Svelte, Ark UI does not open an article with its topic.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Accordion anatomy: root, item, item trigger, item content, item indicator

Usage

<Accordion class="w-full max-w-md -space-y-px" defaultValue={["account"]}>{#each topics as topic (topic.value)}<AccordionItem class="overflow-hidden border bg-background first:rounded-t-lg last:rounded-b-lg" value={topic.value}><AccordionTrigger class="px-4 py-3 hover:no-underline">{topic.title}</AccordionTrigger><AccordionContent class="p-0">{#each topic.articles as article (article.title)}<Collapsible class="border-t bg-accent px-4 py-3"><CollapsibleTrigger class="group flex gap-2 text-start font-medium"><ChevronDownIcon aria-hidden="true" class="mt-0.5 size-4 shrink-0 opacity-60 transition-transform duration-200 group-aria-expanded:rotate-180" />{article.title}</CollapsibleTrigger><CollapsibleContent class="ps-6 pt-1 text-muted-foreground text-sm">{article.content}</CollapsibleContent></Collapsible>{/each}</AccordionContent></AccordionItem>{/each}</Accordion>

FAQ

Why are the articles a Collapsible?

Each article is a Collapsible inside AccordionContent, with its own CollapsibleTrigger. The parent rows stay an Accordion, so each level toggles on its own.

How does an article chevron rotate?

The CollapsibleTrigger has className="group". Its ChevronDownIcon uses group-aria-expanded:rotate-180 and duration-200, with opacity-60 and aria-hidden.

How are the article rows styled?

AccordionContent is p-0, so the rows run to the item edges. Each Collapsible has border-t and bg-accent, and CollapsibleContent uses ps-6 with text-sm text-muted-foreground.

Why does Account start open?

defaultValue={["account"]} opens Account on first render. The string matches that item's value.

Do the articles start open?

No. Each Collapsible renders closed until its own trigger is pressed. Opening Account shows the article titles.

How do I let several parent sections stay open at once?

One open item is the default. Add multiple to Accordion to let several stay open, and list every item that should start open in the defaultValue array.

API Reference

Accordion

Sets defaultValue={["account"]} and value={topic.value}. The rest is on the Accordion page.

Collapsible

No extra props in this demo. The rest is on the Collapsible page.

All 21 accordion examples