<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="jquery.splitter.css"> <style> body, html height: 100%; margin: 0; padding: 0; #mainSplitter width: 100%; height: 100%; .left-pane background: #f4f4f4; padding: 10px; overflow: auto; .right-pane background: #fff; padding: 10px; overflow: auto; .splitter-bar background: #333; width: 5px; .splitter-bar:hover background: #e67e22; </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="jquery.splitter.js"></script> <script> $(function() $('#mainSplitter').splitter( type: 'v', size: 300, minSize: 150, maxSize: 600, cookie: 'mainSplitterPos', onResize: function(e, ui) $('#status').text('Left pane width: ' + ui.size + 'px'); ); ); </script> </head> <body> <div id="mainSplitter"> <div class="left-pane"> <h3>Navigation</h3> <ul><li>Item 1</li><li>Item 2</li></ul> </div> <div class="right-pane"> <h3>Content Area</h3> <p>Drag the splitter bar →</p> <div id="status"></div> </div> </div> </body> </html> 12. Alternatives (if you need more features) | Plugin | Features | |--------|----------| | Split.js | Lightweight, no jQuery dependency, supports multiple panes | | AlloyUI Splitter | More complex, part of YUI but can be used standalone | | GoldenLayout | Full window layout manager (overkill for simple splitters) |
Issue 1: Splitter not resizing Cause: Parent container has no defined height/width. Fix:
/* Hover effect */ .splitter-bar:hover background-color: #2980b9;