Here is one light weight splitter using jQuery that I used in one of my applications. Thought to share the same to you all.
jQuery.splitter() plug-in implements a two-pane resizable animated window, using existing DIV elements for layout.
Example 1
$("#splitterContainer").splitter({splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),closeableto:0});
This will create a vertical splitter with toggle button
Example 2
$("#splitterContainer").splitter({minAsize:100,maxAsize:300,splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),
slave:$("#rightSplitterContainer"),closeableto:0});
This will create a vertical splitter with toggle button, with minimum and maximum width for plane A and bind resize event to the slave element.
Add this script in the Head section :
<head>
<script type="text/javascript">
$(document).ready(function () {
$("#splitterContainer").splitter({ minAsize: 100, maxAsize: 300, splitVertical: true, A: $('#leftPane'), B: $('#rightPane'), slave: $("#rightSplitterContainer"), closeableto: 0 });
$("#rightSplitterContainer").splitter({ splitHorizontal: true, A: $('#rightTopPane'), B: $('#rightBottomPane'), closeableto: 100 });
});
</script>
</head>
Here is the HTML used:
<body>
<div id="splitterContainer">
<div id="leftPane">
<p>This pane limited to a range of 100 to 300 pixels wide with the minAsize / maxAsize
properties of the plugin..</p>
<p> </p>
</div>
<!-- #leftPane -->
<div id="rightPane">
<div style="height:5%;background:#bac8dc">Toolbar?</div>
<div id="rightSplitterContainer" style="height:95%">
<div id="rightTopPane"><p>testing</p> </div>
<!-- #rightTopPane-->
<div id="rightBottomPane">
<div><p>some content</p></div>
</div>
<!-- #rightBottomPane--></div>
<!-- #rightSplitterContainer--></div>
<!-- #rightPane --></div>
<!-- #splitterContainer -->
</body>
You can download the working sample application attached here.