Accordion

The Accordion component wraps one or more AccordionItems in a div with display set to flex.

The flex direction is "column" on small screens. The direction prop sets flex-direction on desktop screens if you want to spread AccordionItems across the width of larger screens.

Adjust the browser width and items will stack.

<Accordion direction="row">
  <Box sx={{ height: "100px", width: "100px", bg: "secondary", m: 3 }} />
  <Box sx={{ height: "100px", width: "100px", bg: "secondary", m: 3 }} />
  <Box sx={{ height: "100px", width: "100px", bg: "secondary", m: 3 }} />
</Accordion>