ui
GitHub

Accordion

A collapsible section to show or hide content.

Docs

accordion-demo.tsx
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion"
 
export function AccordionDemo() {
	return (
		<Accordion className="mx-auto w-96">
			<AccordionItem>
				<AccordionTrigger>What is accordion?</AccordionTrigger>
				<AccordionContent>
					A collapsible component that organizes content into expandable
					sections.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem>
				<AccordionTrigger>Is it customizable?</AccordionTrigger>
				<AccordionContent>
					Yes. You can style it with tailwind classes to match your design
					system.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem>
				<AccordionTrigger>Is it animated?</AccordionTrigger>
				<AccordionContent>
					Yes. Smooth expand and collapse transitions are built in.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem disabled>
				<AccordionTrigger>Can it be disabled?</AccordionTrigger>
			</AccordionItem>
		</Accordion>
	)
}

Installation

npx shadcn@latest add @9ui/accordion

Usage

Imports
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion"
Anatomy
<Accordion>
	<AccordionItem>
		<AccordionTrigger />
		<AccordionContent />
	</AccordionItem>
</Accordion>

Multiple

accordion-multiple-demo.tsx
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion"
 
export function AccordionMultipleDemo() {
	return (
		<Accordion className="mx-auto w-96" multiple>
			<AccordionItem>
				<AccordionTrigger>Can it be multiple?</AccordionTrigger>
				<AccordionContent>
					Yes. You can open multiple items at the same time.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem>
				<AccordionTrigger>
					Try to open multiple items at the same time.
				</AccordionTrigger>
				<AccordionContent>
					You can open multiple items at the same time.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem>
				<AccordionTrigger>
					<span>
						Add <code className="inline-block">multiple</code> prop to the
						accordion.
					</span>
				</AccordionTrigger>
				<AccordionContent>
					You can add the <code>multiple</code> prop to the accordion to allow
					multiple items to be opened at the same time.
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	)
}