Sponsor

Collapse

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

Usage#

Basic Usage#

function Example() {
  const [show, setShow] = React.useState(false)

  const handleToggle = () => setShow(!show)

  return (
    <>
      <Button colorScheme="blue" onClick={handleToggle}>
        Toggle
      </Button>
      <Collapse mt={4} isOpen={show}>
        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.
      </Collapse>
    </>
  )
}

function Example() {
  const [show, setShow] = React.useState(false)
  const handleToggle = () => setShow(!show)
  return (
    <>
      <Button colorScheme="blue" onClick={handleToggle}>
        Toggle
      </Button>
      <Collapse mt={4} isOpen={show}>
        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.
      </Collapse>
    </>
  )
}

Editable Example

Changing the startingHeight#

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.

function Example() {
  const [show, setShow] = React.useState(false)

  const handleToggle = () => setShow(!show)

  return (
    <>
      <Collapse startingHeight={20} isOpen={show}>
        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.
      </Collapse>
      <Button size="sm" onClick={handleToggle} mt="1rem">
        Show {show ? "Less" : "More"}
      </Button>
    </>
  )
}

function Example() {
  const [show, setShow] = React.useState(false)
  const handleToggle = () => setShow(!show)
  return (
    <>
      <Collapse startingHeight={20} isOpen={show}>
        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.
      </Collapse>
      <Button size="sm" onClick={handleToggle} mt="1rem">
        Show {show ? "Less" : "More"}
      </Button>
    </>
  )
}

Editable Example

Props#

This component doesn't have any custom props.

Name	Type	Description
isOpen	`boolean`	If `true`, the content will be visible
animateOpacity	`boolean`	If `true`, the opacity of the content will be animated
duration	`number`	The animation duration as it expands
startingHeight	`number`	The height you want the content in it's collapsed state. Set to `0` by default
endingHeight	`number`	The height you want the content in it's expanded state. Set to `auto` by default
onAnimationEnd	`func`	The function to be called when the collapse animation starts. It provides the `currentHeight` as an argument
onAnimationStart	`func`	The function to be called when the collapse animation ends. It provides the `currentHeight` as an argument

Edit this page

Collapse

.css-12m0k8p{pointer-events:auto;}Usage.css-p1ewx6{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-p1ewx6:focus,.css-p1ewx6[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Basic Usage#

Changing the startingHeight#

Props#

Usage#