Splitter Collapsible Panel

In this post we will show you how to change the default collapsible panel of the jqxSplitter widget. The following code creates a basic Splitter with two Panels.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#splitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150 }, { size: 450}] });
});
</script>
</head>
<body class='default'>
<div id="splitter">
<div>
Left Panel</div>
<div>
Right Panel</div>
</div>
</body>
</html>
Here’s an image of the resulting Splitter: splitter-two-panels When the Split bar’s toggle button is clicked, the Left Panel is collapsed. jquery-splitter-collapsed-panel However, we may want to make the Right Panel collapsible, instead of the Left Panel. In order to achieve that, we need to set the Left Panel’s collapsible property to false.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#splitter').jqxSplitter({ width: 600, height: 500, panels: [{ collapsible: false, size: 150 }, { size: 450}] });
});
</script>
</head>
<body class='default'>
<div id="splitter">
<div>
Left Panel</div>
<div>
Right Panel</div>
</div>
</body>
</html>
The result after clicking the split bar’s toggle button: javascript splitter

About admin


This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxSplitter and tagged , , , , , , , , , , , . Bookmark the permalink.



Leave a Reply