.splitter-bar-horizontal height: 6px !important; cursor: row-resize;
.splitter-bar background-color: #3498db; width: 6px !important; /* For vertical splitter */ cursor: col-resize; jquery splitter plugin
<link rel="stylesheet" href="jquery.splitter.css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="jquery.splitter.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.splitter@0.28.0/css/jquery.splitter.css"> <script src="https://cdn.jsdelivr.net/npm/jquery.splitter@0.28.0/js/jquery.splitter.js"></script> 3. Basic Usage HTML Structure Create a container div with two or more child divs: $('#mySplitter').splitter( size: savedSize
<div id="outerSplitter"> <div id="leftPane"> Left Content </div> <div id="rightSplitter"> <div>Top Right</div> <div>Bottom Right</div> </div> </div> $(function() // Outer vertical splitter $('#outerSplitter').splitter( type: 'v', size: 300 ); // Inner horizontal splitter in right pane $('#rightSplitter').splitter( type: 'h', size: 200 ); ); $('#mySplitter').splitter( onResizeStart: function(event, ui) console.log('Resizing started. Current size:', ui.size); , onResize: function(event, ui) // ui.size = current size of first pane $('#sizeDisplay').text(ui.size + 'px'); , onResizeEnd: function(event, ui) alert('Resize finished at ' + ui.size + 'px'); // Save preference to localStorage localStorage.setItem('splitterPos', ui.size); ); 8. Persisting Splitter Position Using cookie option: $('#mySplitter').splitter( cookie: 'mySplitterPos' // Stores position in cookie ); Using localStorage manually: var savedSize = localStorage.getItem('splitterPos') || 250; $('#mySplitter').splitter( size: savedSize, onResizeEnd: function(event, ui) localStorage.setItem('splitterPos', ui.size); .splitter-bar-horizontal height: 6px !important
Include files: