ExpandCollapse

The ExpandCollapse component can be wrapped around any content that should be hidden or shown depending on state. When the component is collapsed, its children will be hidden and the surrounding content will pull in to fill the empty space. If you would like to expand and collapse content without pushing and pulling the surrounding elements, try using the Drawer component.

For more information on how to use the features and props for this component, check out the developer documentation.

The ExpandCollapse component can be opened along either dimension (height or width) by setting the dimension prop. In addition, min and max props are provided to control the limits on how far the component may expand or collapse.

You can control how quickly the component expands and collapses by by passing a CSS time value to transitionSpeed, which is a string containing any positive number directly followed by 's' or 'ms'. If you would like no transition, pass 0 the to transitionSpeed prop. Callback functions are provided to allow for event handling before and after the component expands and collapses.

Vertical

Horizontal

NameTypeDefaultDescription
asElementTypeHTML tag or React Component to render the component as.
childrenReactNodeContent to expand/collapse.
classNamestringAdditional CSS classes.
collapsedbooleanfalse If true,the content will be hidden.
dimension
'height' |'width' 
"height" Used to determine the transition property.
forwardedAsElementTypeHTML tag or React Component to finally render the component as.
maxstringMaximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element.
minstringMinimum height/width to collapse to. This will set the starting collapsed size as well.
nullWhenCollapsedbooleanfalse If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.
onAfterCollapse() => voidCallback fired after content collapsed.
onAfterExpand() => voidCallback fired after content expanded.
onBeforeCollapse() => voidCallback fired before content collapsed.
onBeforeExpand() => voidCallback fired before content expanded.
transitionSpeedstring"0.25s" Determine the speed of animation. This value comes from theme.base.animation.speed.