• Material
  • Fabric
  • Bootstrap
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse

Chart

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.

DEMO
SOURCE

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.