Collapse

Toggle the visibility of content, animating height (or width) from its current value to zero.

Overview

<Collapse> shows and hides its children, driven by the visible prop — a button or link elsewhere on the page typically toggles it. Collapsing an element animates its height from the current value down to 0. Because of how CSS handles that animation, padding can't be applied directly to a .collapse element; wrap the content in its own element and pad that instead.

Examples

Either a link or a button component can serve as the trigger.

Link

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

import { useState } from 'react'
import { Card, CardBody, Button, Collapse } from '@chassis-ui/react'

export const Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button
        href="#"
        onClick={(event) => {
          event.preventDefault()
          setVisible(!visible)
        }}
      >
        Link
      </Button>
      <Button onClick={() => setVisible(!visible)}>Button</Button>
      <Collapse visible={visible}>
        <Card className="mt-md">
          <CardBody>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
            sapiente ea proident.
          </CardBody>
        </Card>
      </Collapse>
    </>
  )
}

Horizontal

Set horizontal to animate width instead of height, and set an explicit width on the immediate child element.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

import { useState } from 'react'
import { Card, CardBody, Button, Collapse } from '@chassis-ui/react'

export const Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button
        className="mb-md"
        onClick={() => setVisible(!visible)}
        aria-expanded={visible}
        aria-controls="collapseWidthExample"
      >
        Button
      </Button>
      <div style={{ minHeight: '120px' }}>
        <Collapse id="collapseWidthExample" horizontal visible={visible}>
          <Card style={{ width: '300px' }}>
            <CardBody>
              This is some placeholder content for a horizontal collapse. It's hidden by default and
              shown when triggered.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    </>
  )
}

Multiple targets

A single <Button> can show and hide more than one <Collapse> at once.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

import { useState } from 'react'
import { Button, Card, CardBody, Collapse, Grid } from '@chassis-ui/react'

export const Example = () => {
  const [visibleA, setVisibleA] = useState(false)
  const [visibleB, setVisibleB] = useState(false)
  return (
    <>
      <Button onClick={() => setVisibleA(!visibleA)}>Toggle first element</Button>
      <Button onClick={() => setVisibleB(!visibleB)}>Toggle second element</Button>
      <Button
        onClick={() => {
          setVisibleA(!visibleA)
          setVisibleB(!visibleB)
        }}
      >
        Toggle both elements
      </Button>
      <Grid columns={2} gap="md">
        <div>
          <Collapse visible={visibleA}>
            <Card className="mt-md">
              <CardBody>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident.
              </CardBody>
            </Card>
          </Collapse>
        </div>
        <div>
          <Collapse visible={visibleB}>
            <Card className="mt-md">
              <CardBody>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident.
              </CardBody>
            </Card>
          </Collapse>
        </div>
      </Grid>
    </>
  )
}

API

Collapse

Prop	Type	Default
`className?`	`string`	—
A string of all className you want applied to the base component.
`horizontal?`	`boolean`	—
Set horizontal collapsing to transition the width instead of height.
`onHide?`	`(() => void)`	—
Callback fired when the component requests to be hidden.
`onShow?`	`(() => void)`	—
Callback fired when the component requests to be shown.
`visible?`	`boolean`	—
Toggle the visibility of component.