Accordion Basic

1// shadcn
2import {
3  Accordion,
4  AccordionContent,
5  AccordionItem,
6  AccordionTrigger
7} from "@/components/ui/accordion";
8 
9//  ------------------------------ | ACCORDION BASIC | ------------------------------  //
10 
11export default function AccordionBasic() {
12  return (
13    <Accordion defaultValue={["item-1"]} className="w-full">
14      <AccordionItem value="item-1" className="bg-card border-border">
15        <AccordionTrigger className="p-4 text-base font-semibold hover:no-underline">
16          Accordion Item #1
17        </AccordionTrigger>
18        <AccordionContent className="p-4 pt-0">
19          <strong>This is the first item's accordion body.</strong> It is hidden
20          by default, until the collapse plugin adds the appropriate classes
21          that we use to style each element.
22        </AccordionContent>
23      </AccordionItem>
24      <AccordionItem value="item-2" className="bg-card border-border">
25        <AccordionTrigger className="p-4 text-base font-semibold hover:no-underline">
26          Accordion Item #2
27        </AccordionTrigger>
28        <AccordionContent className="p-4 pt-0">
29          <strong>This is the second item's accordion body.</strong> It is
30          hidden by default, until the collapse plugin adds the appropriate
31          classes that we use to style each element.
32        </AccordionContent>
33      </AccordionItem>
34      <AccordionItem value="item-3" className="bg-card border-border">
35        <AccordionTrigger className="p-4 text-base font-semibold hover:no-underline">
36          Accordion Item #3
37        </AccordionTrigger>
38        <AccordionContent className="p-4 pt-0">
39          <strong>This is the third item's accordion body.</strong> It is hidden
40          by default, until the collapse plugin adds the appropriate classes
41          that we use to style each element.
42        </AccordionContent>
43      </AccordionItem>
44    </Accordion>
45  );
46}