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:
When the Split bar’s toggle button is clicked, the Left Panel is collapsed.
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: