Accordion

 

Source

The component uses https://ui.shadcn.com/docs/components/accordion

example - simple

1
2
3
4
5
6
7
8
<Accordion>
  <AccordionItem title="Basic">
    Non qui officia eiusmod ea fugiat veniam laborum Lorem qui irure ea ad elit proident. Dolor cillum laboris fugiat esse consequat. Eu esse incididunt adipisicing eu ipsum. Culpa officia amet irure labore proident tempor voluptate adipisicing aute non est.
  </AccordionItem>
  <AccordionItem title="Advanced">
    Non qui officia eiusmod ea fugiat veniam laborum Lorem qui irure ea ad elit proident. Dolor cillum laboris fugiat esse consequat. Eu esse incididunt adipisicing eu ipsum. Culpa officia amet irure labore proident tempor voluptate adipisicing aute non est.
  </AccordionItem>
</Accordion>

example - collapsible

1
2
3
4
5
6
7
8
<Accordion collapsible>
  <AccordionItem title="Basic">
    Non qui officia eiusmod ea fugiat veniam laborum Lorem qui irure ea ad elit proident. Dolor cillum laboris fugiat esse consequat. Eu esse incididunt adipisicing eu ipsum. Culpa officia amet irure labore proident tempor voluptate adipisicing aute non est.
  </AccordionItem>
  <AccordionItem title="Advanced">
    Non qui officia eiusmod ea fugiat veniam laborum Lorem qui irure ea ad elit proident. Dolor cillum laboris fugiat esse consequat. Eu esse incididunt adipisicing eu ipsum. Culpa officia amet irure labore proident tempor voluptate adipisicing aute non est.
  </AccordionItem>
</Accordion>

example - multiple

1
2
3
4
5
6
7
8
9
10
11
<Accordion type="multiple">
  <AccordionItem title="Basic">
    Non qui officia eiusmod ea fugiat veniam laborum Lorem qui irure ea ad elit proident. Dolor cillum laboris fugiat esse consequat. Eu esse incididunt adipisicing eu ipsum. Culpa officia amet irure labore proident tempor voluptate adipisicing aute non est.
  </AccordionItem>
  <AccordionItem title="Advanced">
    Non qui officia eiusmod ea fugiat veniam laborum Lorem qui irure ea ad elit
    proident. Dolor cillum laboris fugiat esse consequat. Eu esse incididunt
    adipisicing eu ipsum. Culpa officia amet irure labore proident tempor
    voluptate adipisicing aute non est.
  </AccordionItem>
</Accordion>