Accordions
Accordions add more structure to a page giving the ability to hide unnecessary information unless a visiting user wants to see it. This avoids clutter on the UI.
Single Accordions
There can be a single accordion ...
First Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris...
<AccordionItem title="First Accordion">
  ... content
</AccordionItem>
The example above shows an accordion using just a single <AccordionItem /> component.
Multiple Accordions
There can be multiple accordions that open exclusively ...
Second Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris...
Third Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris...
<Accordion>
  <AccordionItem title="Second Accordion">
    ... content
  </AccordionItem>
  <AccordionItem title="Third Accordion">
    ... content
  </AccordionItem>
</Accordion>
The example above shows an accordion using just an <Accordion /> component with two child <AccordionItem /> components.
Multiple Accordions
There can be multiple accordions, each able to open at the same time ...
Fourth Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris...
Fifth Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris...
<Accordion openMultiple>
  <AccordionItem title="Fourth Accordion">
    ... content
  </AccordionItem>
  <AccordionItem title="Fifth Accordion">
    ... content
  </AccordionItem>
</Accordion>
The example above shows an accordion using just an <Accordion /> with openMultiple set to true component with two child <AccordionItem /> components.

FUTORO