Expand Collapse

The ExpandCollapse component can be wrapped around any content that should be hidden depending on state. When the component's child content is collapsed, 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.

Vertical

Horizontal

Max

Setting max on the ExpandCollapse component will enforce that the expanded content will never surpass that maximum value set. Any content that spills over that max will be hidden.

Min

Setting min on the ExpandCollapse component will prevent it from collapsing entirely. It will only ever collapse down to the minimum value set.

The speed with which the content within an ExpandCollapse component expands and collapses can be controlled 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.