Example of Expand and Collapse in React Splitter Component

/
/
ExpandCollapse

This example demonstrates the expand and collapse functionalities of the Splitter control. To expand or collapse the panes, hover the mouse over the separator (divider) bar and click the corresponding icon to expand or collapse pane.

More Details...

Loading....
Description

The splitter (split container) allows expanding and collapsing its split panes. You can control this behavior using the paneSettings Collapsible property. The collapsible behavior can be enabled for specific pane alone.

When you hover the mouse over the pane's separator (divider), the expand and collapse icons will be visible. While clicking the icon, the corresponding pane is expanded or collapsed. The remaining panes automatically adjust its dimension based on the expanded or collapsed panes. These icons are visible by default in mobile devices.