Collapsible

Determines whether certain content is shown based on a trigger.

Examples

Using Component

Code

<Collapsible id="using-component" />

Initially Open

View standalone

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate.

Code

<Collapsible
  id="collapsible"
  initiallyOpen
/>

Using Hook

View standalone

Code

<>
  <Button
    aria-controls="my-collapsible"
    onClick={function noRefCheck() {}}
  >
    Show content
  </Button>
  <Box
    atoms={{
      border: 'default',
      padding: '16px'
    }}
    hidden
    id="my-collapsible"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus explicabo modi a mollitia expedita cumque accusantium error beatae velit porro, et laborum, quia quibusdam consequuntur ea. Facilis odio dolorum cupiditate.
  </Box>
</>

Props

Collapsible

`initiallyOpen`

boolean

`id`

string

`atoms`

Applies permitted design system styles. See styling documentation for more.

useCollapsible

`initiallyOpen`

boolean

`id`

string

`atoms`

Applies permitted design system styles. See styling documentation for more.