How can I help you?
Expand and collapse in EJ2 JavaScript Splitter control
5 Mar 202615 minutes to read
Collapsible panes
Splitter panes support built-in expand and collapse functionality. By default, collapsible behavior is disabled. Enable the collapsible behavior in the paneSettings property to show or hide the expand or collapse icons in the panes. Users can dynamically expand and collapse panes by using those icons.
The following code shows how to enable collapsible behavior.
// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
height: '200px',
paneSettings: [
{ size: '200px', collapsible: true },
{ size: '200px', collapsible: true },
{ size: '200px', collapsible: true }
],
width: '600px'
});
// Render initialized splitter
splitObject.appendTo('#splitter');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Splitter Expand/Collapse </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render the splitter-->
<div class="default">
<div id="splitter">
<div>
<div class="content">
<h3 class="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>
<div>
<div class="content">
<h3 class="h3">CAMEMBERT </h3>
The village in the Orne department of Normandy where the famous French cheese is originated from.
</div>
</div>
<div>
<div class="content">
<h3 class="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>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Programmatically control the expand and collapse action
The Splitter provides public methods to control expand and collapse behavior programmatically using the expand and collapse methods. Refer to the following code example.
// Initialize Splitter control
var splitObj = new ej.layouts.Splitter({
height: '230px',
paneSettings: [
{ collapsible: true },
{ collapsible: true },
{ collapsible: true }
],
width: '100%'
});
// Render initialized splitter
splitObj.appendTo('#splitter');
document.getElementById('expand').onclick = function () {
splitObj.expand(0);
};
document.getElementById('collapse').onclick = function () {
splitObj.collapse(0);
};<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render the splitter-->
<div class="default">
<div id="splitter">
<div>
<div class="content">
<h3 class="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>
<div>
<div class="content">
<h3 class="h3">CAMEMBERT </h3>
The village in the Orne department of Normandy where the famous French cheese is originated from.
</div>
</div>
<div>
<div class="content">
<h3 class="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>
</div>
</div>
<button id="expand" class="e-control e-btn e-lib">expand</button>
<button id="collapse" class="e-control e-btn e-lib">collapse</button>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Specify initial state to panes
A specific panes can rendered in a collapsed state on page load. Specify a Boolean value for the collapsed property to control this behavior. The following code shows how to collapse panes on render (the second pane renders with collapsed state).
// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
height: '200px',
paneSettings: [
{ size: '200px' },
{ size: '200px', collapsed: true },
{ size: '200px' }
],
width: '600px'
});
// Render initialized splitter
splitObject.appendTo('#splitter');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render the splitter-->
<div class="default">
<div id="splitter">
<div>
<div class="content">
<h3 class="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>
<div>
<div class="content">
<h3 class="h3">CAMEMBERT </h3>
The village in the Orne department of Normandy where the famous French cheese is originated from.
</div>
</div>
<div>
<div class="content">
<h3 class="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>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>