Jquery Splitter Plugin _best_ File
<!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');
);
Include files:
// Ensure we have exactly two panels if ($children.length !== 2) return; jquery splitter plugin