Jquery Splitter Plugin -

); Override default CSS:

<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); jquery splitter plugin

<div id="mySplitter"> <div>Left Pane</div> <div>Right Pane</div> </div> $(function() $('#mySplitter').splitter(); ); This creates a vertical splitter (default) with two panes of equal width. 4. Configuration Options | Option | Type | Default | Description | |--------|------|---------|-------------| | type | string | 'v' | 'v' (vertical) or 'h' (horizontal) | | size | integer/string | null | Initial size of first pane (e.g., 200 , '50%' ) | | minSize | integer | 0 | Minimum size of first pane in pixels | | maxSize | integer | null | Maximum size of first pane | | resizeToWidth | boolean | false | Adjust pane width on window resize | | cookie | string | null | Name of cookie to store splitter position | | onResize | function | null | Callback after resize | | onResizeStart | function | null | Callback when resize starts | | onResizeEnd | function | null | Callback when resize ends | Example with options: $('#mySplitter').splitter( type: 'v', size: 250, // Left pane 250px wide minSize: 100, maxSize: 500, onResize: function(event, ui) console.log('New sizes:', ui.size); ); 5. Creating Horizontal Splitter <div id="horizontalSplitter"> <div>Top Pane</div> <div>Bottom Pane</div> </div> $('#horizontalSplitter').splitter( type: 'h', size: 200 // Top pane height 200px ); 6. Nested Splitters (3+ Panes) To create more than two panes, nest splitters: Nested Splitters (3+ Panes) To create more than

A jQuery Splitter plugin allows you to divide a web page or container into two or more resizable panels (vertical or horizontal). Users can drag a divider bar to adjust the relative size of each pane. /* Remove default grip */

Include files:

.splitter-bar-vertical background-image: none; /* Remove default grip */