Collapse

function Example() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <AtlasButton onClick={() => setOpen(!open)}>Toggle collapse</AtlasButton>
      <Collapse in={open}>
        <Box
          sx={{
            backgroundColor: 'background.accent.teal.subtlest',
            border: '1px dashed',
            borderColor: 'border.accent.teal',
            color: 'text.default',
            padding: 4,
            marginTop: 3
          }}
        >
          Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at interdum
          iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at
          interdum iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non
          at interdum iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut
          non at interdum iac.
        </Box>
      </Collapse>
    </>
  )
}
render(<Example />)