Vertical & Horizontal Split View With jQuery - jsRapSpliter

jsRapSpliter is a lightweight jQuery splitter plugin that allows webpage or specific container splitting in vertical and horizontal orientations.

It takes a DIV element with two child DIVs and converts them into a vertical or horizontal split view, where users can resize each DIV pane with mouse drag.

See Also:

• 7 Best Splitter JavaScript Libraries To Create Split Views

How to use it:

1. Add DIV panes to the split view.

<div id="demo" >
 <div>Panel 1</div>
 <div>Panel 2</div>
</div>

2. Download and load the jsRapSpliter.js library after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jsRapSpliter.js"></script>

3. Initialize the plugin on the top container to generate a horizontal split view.

$(function(){
  $('#demo').jsRapSpliter();
});

4. Generate a vertical split view instead.

$(function(){
  $('#demo').jsRapSpliter({
    horizontal: true,
  });
});

5. Set the height of the spilt view. Default: 200px.

$(function(){
  $('#demo').jsRapSpliter({
    height: '300px',
  });
});

6. Set the start position of the drag handle (splitter). Default: 0.5 (50%).

$(function(){
  $('#demo').jsRapSpliter({
    position: 0.6,
  });
});

7. Set the width of the drag handle (splitter). Default: 8.0.

$(function(){
  $('#demo').jsRapSpliter({
    spliterWidth: 0.6
  });
});

8. Override the default styles of the drag handle (splitter).

/* vertical splitter */
.spliterV {
  position: absolute;
  height: 100%;
  cursor: col-resize;
  border: solid 1px #bab;
}

/* horizontal splitter */
.spliterH {
  position: absolute;
  width: 100%;
  cursor: row-resize;
  border: solid 1px #bab;
}

---

This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.