Expand and collapse panes in React Splitter component

7 Oct 202524 minutes to read

Collapsible panes

The React Splitter component supports built-in expand and collapse functionality for its panes. By default, this behavior is disabled. To enable it, set the collapsible property within paneSettings. This displays expand and collapse icons in the panes. You can dynamically expand and collapse the panes by clicking on the corresponding icons

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 allow you to dynamically toggle panes based on application logic.

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 for customizing the default layout based on user preferences 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

Expand and collapse panes in React Splitter component

Collapsible panes

Programmatically control the expand and collapse action

Set initial collapsed state

See Also