---
title: Collapse
category: General
summary: Simplifies information by expanding and collapsing content.
---

```jsx live
render(() => {
  const [open, setOpen] = React.useState(false)
  return (
    <StackView alignment="center" spacing={1}>
      <Button
        title="Toggle Collapse"
        onClick={() => setOpen((open) => !open)}
      />
      <Collapse
        lazy
        open={open}
        onComplete={() => console.log('collapse is ', open ? 'open' : 'closed')}
      >
        <Card padding={2}>Collapsed content 🎉</Card>
      </Collapse>
    </StackView>
  )
})
```