AccordionItem

An AccordionItem is a wrapper for any content. It is collapsed by default and opens when a user clicks the title.

AccordionItem @"src/components/AccordionItem"

Edit the props to see this component update live!

jsx

<Accordion>
  {data.map((item) => (
    <AccordionItem key={item.id} data={item} variant="info">
      <Text as="p" sx={{ ml: 2 }}>
        {item.content}
      </Text>
    </AccordionItem>
  ))}
</Accordion>

<Accordion>
  {data.map((item) => (
    <AccordionItem key={item.id} data={item} variant="info">
      <Text as="p" sx={{ ml: 2 }}>
        {item.content}
      </Text>
    </AccordionItem>
  ))}
</Accordion>