Collapse

Collapse is a component that allows you to expand or collapse an element for display.

Import

import { Collapse } from "@yamada-ui/react"

Copied!

Usage

To control the visibility, set isOpen.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse isOpen={isOpen}>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </>
)

Copied!

Change the Duration

To change the duration, set a number (in seconds) to duration.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse isOpen={isOpen} duration={0.7}>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </>
)

Copied!

Unmount on Exit

To unmount the component when it is not visible, set unmountOnExit to true.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse isOpen={isOpen} unmountOnExit>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </>
)

Copied!

Disable Opacity Animation

To disable the opacity animation, set animationOpacity to false.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse isOpen={isOpen} animationOpacity={false}>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </>
)

Copied!

Add a Starting Height

To add a starting height, set a string or number to startingHeight.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <Collapse isOpen={isOpen} startingHeight={36}>
      <Box color="purple.500" mt="md">
        私の戦闘力は530000です。
        <br />
        ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Box>
    </Collapse>
  </>
)

Copied!

Edit this page on GitHub

PreviousTransitions NextFade