Accordion

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion";
7 
8export function AccordionDemo() {
9  return (
10    <Accordion type="single" collapsible className="w-4/5">
11      <AccordionItem value="item-1">
12        <AccordionTrigger>Is it accessible?</AccordionTrigger>
13        <AccordionContent>
14          Yes. It adheres to the WAI-ARIA design pattern.
15        </AccordionContent>
16      </AccordionItem>
17      <AccordionItem value="item-2">
18        <AccordionTrigger>Is it styled?</AccordionTrigger>
19        <AccordionContent>
20          Yes. It comes with default styles that matches the other
21          components&apos; aesthetic.
22        </AccordionContent>
23      </AccordionItem>
24      <AccordionItem value="item-3">
25        <AccordionTrigger>Is it animated?</AccordionTrigger>
26        <AccordionContent>
27          Yes. Its animated by default, but you can disable it if you prefer.
28        </AccordionContent>
29      </AccordionItem>
30    </Accordion>
31  );
32}