Expand and collapse panes in React Splitter component

5 Mar 202624 minutes to read

Collapsible panes

The React Splitter component supports built-in expand and collapse functionality for panes. By default, pane expand/collapse is disabled. To enable it, set the collapsible property within paneSettings; this displays expand and collapse icons for the pane. Click the icons to toggle pane visibility.

The following example demonstrates how to enable collapsible behavior:

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    firstPaneContent() {
        return (<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
    }
    ;
    secondPaneContent() {
        return (<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
    }
    ;
    thirdPaneContent() {
        return (<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
    }
    ;
    render() {
        return (<div className="App">
      <SplitterComponent id="expand-collapse" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={this.firstPaneContent} collapsible={true}/>
        <PaneDirective size='200px' content={this.secondPaneContent} collapsible={true}/>
        <PaneDirective size='200px' content={this.thirdPaneContent} collapsible={true}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public firstPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
  };
  public secondPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
  };
  public thirdPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
  };

  public render(): JSX.Element {
    return (<div className="App">
      <SplitterComponent id="expand-collapse" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.firstPaneContent} collapsible={true}/>
        <PaneDirective size='200px' content = {this.secondPaneContent} collapsible={true}/>
        <PaneDirective size='200px' content = {this.thirdPaneContent} collapsible={true}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function firstPaneContent() {
        return (<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
    }
    ;
    function secondPaneContent() {
        return (<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
    }
    ;
    function thirdPaneContent() {
        return (<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
    }
    ;
    return (<div className="App">
          <SplitterComponent id="expand-collapse" height="250px" width='600px'>
          <PanesDirective>
            <PaneDirective size='200px' content={firstPaneContent} collapsible={true}/>
            <PaneDirective size='200px' content={secondPaneContent} collapsible={true}/>
            <PaneDirective size='200px' content={thirdPaneContent} collapsible={true}/>
          </PanesDirective>
          </SplitterComponent>
      </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function firstPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
  };
  function secondPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
  };
  function thirdPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
  };


    return (
      <div className="App">
          <SplitterComponent id="expand-collapse" height="250px" width='600px'>
          <PanesDirective>
            <PaneDirective size='200px' content = {firstPaneContent} collapsible={true}/>
            <PaneDirective size='200px' content = {secondPaneContent} collapsible={true}/>
            <PaneDirective size='200px' content = {thirdPaneContent} collapsible={true}/>
          </PanesDirective>
          </SplitterComponent>
      </div>
    );

}
export default App;

Programmatically control the expand and collapse action

You can also control pane visibility programmatically using the Splitter’s public methods: expand and collapse. These methods let applications toggle panes based on logic or user actions.

Here’s an example of using these methods:

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    splitterInstance;
    expandClick() {
        this.splitterInstance.expand(0);
    }
    collapseClick() {
        this.splitterInstance.collapse(0);
    }
    render() {
        return (<div className="App">
    <SplitterComponent id="expand-method" height="250px" width='600px' ref={splitter => this.splitterInstance = splitter}>
    <PanesDirective>
      <PaneDirective size='200px' content='Left pane' collapsible={true}/>
      <PaneDirective size='200px' content='Middle pane' collapsible={true}/>
      <PaneDirective size='200px' content='Right pane' collapsible={true}/>
    </PanesDirective>
    </SplitterComponent>
    <div id='btn-container'>
     <button className="e-control e-btn" onClick={this.expandClick = this.expandClick.bind(this)} id="expand"> Expand </button>
     <button className="e-control e-btn" onClick={this.collapseClick = this.collapseClick.bind(this)} id="collapse"> Collapse </button>
     </div>
        </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public splitterInstance: SplitterComponent;
  public expandClick(): void {
    this.splitterInstance.expand(0);
  }
  public collapseClick(): void {
    this.splitterInstance.collapse(0);
  }
public render() {
  return (<div className="App">
    <SplitterComponent id="expand-method" height="250px" width='600px' ref={splitter => this.splitterInstance = splitter!}>
    <PanesDirective>
      <PaneDirective size='200px' content = 'Left pane' collapsible={true} />
      <PaneDirective size='200px' content = 'Middle pane' collapsible={true}/>
      <PaneDirective size='200px' content = 'Right pane' collapsible={true}/>
    </PanesDirective>
    </SplitterComponent>
    <div id='btn-container'>
     <button className="e-control e-btn" onClick={this.expandClick=this.expandClick.bind(this)} id="expand"> Expand </button>
     <button className="e-control e-btn"  onClick={this.collapseClick=this.collapseClick.bind(this)} id="collapse"> Collapse </button>
     </div>
</div>);
}
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    let splitterInstance;
    function expandClick() {
        splitterInstance.expand(0);
    }
    function collapseClick() {
        splitterInstance.collapse(0);
    }
    return (<div className="App">
        <SplitterComponent id="expand-method" height="250px" width='600px' ref={splitter => splitterInstance = splitter}>
        <PanesDirective>
          <PaneDirective size='200px' content='Left pane' collapsible={true}/>
          <PaneDirective size='200px' content='Middle pane' collapsible={true}/>
          <PaneDirective size='200px' content='Right pane' collapsible={true}/>
        </PanesDirective>
        </SplitterComponent>
        <div id='btn-container'>
        <button className="e-control e-btn" onClick={expandClick = expandClick.bind(this)} id="expand"> Expand </button>
        <button className="e-control e-btn" onClick={collapseClick = collapseClick.bind(this)} id="collapse"> Collapse </button>
        </div>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  let splitterInstance: SplitterComponent;
  function expandClick(): void {
    splitterInstance.expand(0);
  }
  function collapseClick(): void {
    splitterInstance.collapse(0);
  }

  return (
    <div className="App">
        <SplitterComponent id="expand-method" height="250px" width='600px' ref={splitter =>splitterInstance = splitter!}>
        <PanesDirective>
          <PaneDirective size='200px' content = 'Left pane' collapsible={true} />
          <PaneDirective size='200px' content = 'Middle pane' collapsible={true}/>
          <PaneDirective size='200px' content = 'Right pane' collapsible={true}/>
        </PanesDirective>
        </SplitterComponent>
        <div id='btn-container'>
        <button className="e-control e-btn" onClick={expandClick=expandClick.bind(this)} id="expand"> Expand </button>
        <button className="e-control e-btn"  onClick={collapseClick=collapseClick.bind(this)} id="collapse"> Collapse </button>
        </div>
    </div>
  );

}
export default App;

Set initial collapsed state

To render a pane in a collapsed state on initial load, set the collapsed property to true. This is useful to customize the default layout based on user preference or screen size.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    firstPaneContent() {
        return (<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
    }
    ;
    secondPaneContent() {
        return (<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
    }
    ;
    thirdPaneContent() {
        return (<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
    }
    ;
    render() {
        return (<div className="App">
  <SplitterComponent id="collapsed" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content={this.firstPaneContent}/>
    <PaneDirective size='200px' content={this.secondPaneContent} collapsed={true}/>
    <PaneDirective size='200px' content={this.thirdPaneContent}/>
  </PanesDirective>
  </SplitterComponent>
        </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public firstPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
  };
  public secondPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
  };
  public thirdPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
  };
public render() {
  return (<div className="App">
  <SplitterComponent id="collapsed" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content = {this.firstPaneContent}/>
    <PaneDirective size='200px' content = {this.secondPaneContent} collapsed={true}/>
    <PaneDirective size='200px' content = {this.thirdPaneContent}/>
  </PanesDirective>
  </SplitterComponent>
</div>);
}
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function firstPaneContent() {
        return (<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
    }
    ;
    function secondPaneContent() {
        return (<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
    }
    ;
    function thirdPaneContent() {
        return (<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
    }
    ;
    return (<div className="App">
      <SplitterComponent id="collapsed" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={firstPaneContent}/>
        <PaneDirective size='200px' content={secondPaneContent} collapsed={true}/>
        <PaneDirective size='200px' content={thirdPaneContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function firstPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
      </div>
      </div>);
  };
  function secondPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from. </div>
      </div>);
  };
  function thirdPaneContent(): JSX.Element {
    return(<div>
      <div className='content'>
        <h3>GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
      </div>
      </div>);
  };

  return (
    <div className="App">
      <SplitterComponent id="collapsed" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {firstPaneContent}/>
        <PaneDirective size='200px' content = {secondPaneContent} collapsed={true}/>
        <PaneDirective size='200px' content = {thirdPaneContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>
  );

}
export default App;

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Expand and collapse panes in React Splitter component

Collapsible panes

Programmatically control the expand and collapse action

Set initial collapsed state

See Also