shadcnui-blocks
componentaccordion-08source: ok · hit
Multiple Expanded at a time Accordion
An accordion that allows multiple items to be expanded at once
npx shadcn add "https://shadcnui-blocks.com/r/accordion-08.json"free
Interaction
accordion
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
accordion
Files1 · source cached 10/8/2026, 6:01:29 PM
src/components/customized/accordion/accordion-08.tsx
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/registry/ui/accordion";
const items = [
{
title: "Can I change or cancel my order after placing it?",
content:
"Yes, you can change or cancel your order within 1 hour of placement by visiting your account page or contacting our support team. After that, orders may already be processed for shipping.",
},
{
title: "How long does shipping usually take?",
content:
"Domestic shipping typically takes 3-5 business days, while international orders may take up to 2-3 weeks depending on your location and customs processing times.",
},
{
title: "What is your return policy?",
content:
"We offer a 30-day return policy for most products. Items must be unused and in their original packaging. To initiate a return, simply contact our support with your order details.",
},
];
export default function AccordionMultipleOpenDemo() {
return (
<Accordion
className="my-4 w-full max-w-lg"
defaultValue={["item-0", "item-1"]}
type="multiple"
>
{items.map(({ title, content }, index) => (
<AccordionItem key={index} value={`item-${index}`}>
<AccordionTrigger>{title}</AccordionTrigger>
<AccordionContent>{content}</AccordionContent>
</AccordionItem>
))}
</Accordion>
);
}