The Collapse element shows and hides content with a built-in slide in/out animation. You might use this to create a panel of settings for your application, with sub-sections that can be expanded and collapsed.


I am an open Collapse component. Edit the code to change my state.


Collapse is stateless — whether it is open or closed is determined by the isOpen prop. The following example shows how to combine it with a Button to control its state.

1import { useState } from "react";
2import { Collapse } from "@commure/components-foundation";
4const CollapseExample = (props) => {
5 const [isOpen, setIsOpen] = useState(false);
7 return (
8 <div>
9 <Button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>
10 {isOpen ? "Hide" : "Show"}
11 </Button>
12 <Collapse isOpen={isOpen}>
13 Dummy text.
14 </Collapse>
15 </div>
16 );
19export CollapseExample;

API Reference


Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
componentfalseReact.ReactTypeComponent to render as the root element. Useful when rendering a `Collapse` inside a `<table>`, for instance.
isOpenfalsebooleanWhether the component is open or closed.
keepChildrenMountedfalsebooleanWhether the child components will remain mounted when the `Collapse` is closed. Setting to true may improve performance by avoiding re-mounting children.
transitionDurationfalsenumberThe length of time the transition takes, in milliseconds. This must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.

Related Reading

Blueprint Reference