Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Multi Level

Multi-Level Accordion with Plus/Minus Trigger for React

An accordion of help center topics with a plus/minus toggle on the right of each trigger, whose sections list their articles as nested collapsibles.

Framework
UI library

A help center in two levels. Topics open with a plus/minus toggle on the right, and their articles open as nested Collapsible rows with a chevron, so the two levels look different at a glance. Use this React example for FAQs and knowledge bases with categories.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the parent plus turn into a minus?

**:data-[slot=accordion-trigger-icon]:hidden on AccordionTrigger hides the built-in chevron. PlusIcon and MinusIcon share one relative size-4 box, and group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200. Both icons are aria-hidden and text-muted-foreground.

What toggles an article?

Each article is a Collapsible inside AccordionContent. Its ChevronDownIcon sits on CollapsibleTrigger and uses group-aria-expanded:rotate-180 with duration-200.

How are the article rows styled?

AccordionContent is p-0. 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 trigger is pressed. Account starts open, so the article titles show.

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.

All 21 accordion examples