Fork me on GitHub

Split.js

Split.js is a lightweight, unopinionated utility for creating adjustable split views or panes.

No dependencies or markup required, just two or more elements with a common parent.

Views can be split horizontally or vertically, with draggable gutters inserted between every two elements.

Documentation

Split(<HTMLElement|selector[]> elements, <options> options?)
Options Type Default Description
sizes Array of numbers Initial sizes of each element in percents.
minSize Number or array 100 Minimum size of each element.
gutterSize Number 10 Gutter size in pixels.
snapOffset Number 30 Snap to minimum size offset.
direction String 'horizontal' Direction to split: horizontal or vertical.
cursor String 'grabbing' Cursor to display while dragging.
onDrag Function Callback on drag.
onDragStart Function Callback on drag start.
onDragEnd Function Callback on drag end.


Usage Examples

A split with two elements, starting at 25% and 75% wide with 200px minimum width.

Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200
});

#three

#four


A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively.

Split(['#one', '#two', '#three'], {
    minSize: [100, 100, 300]
});

#five, minSize: 100px

#six, minSize: 100px

#seven, minSize: 300px


A vertical split with two elements, starting with even heights.

Split(['#eight', '#nine'], {
    direction: 'vertical'
});

#eight

#nine


Nested splits, horizontal and vertical.

Split(['#ten', '#eleven']);

Split(['#twelve', '#thirteen'], {
    direction: 'vertical'
});

#twelve

#thirteen

#eleven



The actual size calculation falls back from calc() to support IE8, or can be configured to use flexbox.

Split(['#flex-1', '#flex-2'], {
    elementStyle: function (dimension, size, gutterSize) {
        return { 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)' }
    },
    gutterStyle: function (dimension, gutterSize) {
        return { 'flex-basis':  gutterSize + 'px' }
    }
});

#flex-1

#flex-2



And with flexbox reverse:

Split(['#flex-3', '#flex-4'], {
    elementStyle: function (dimension, size, gutterSize) {
        return { 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)' }
    },
    gutterStyle: function (dimension, gutterSize) {
        return { 'flex-basis':  gutterSize + 'px' }
    }
});

#flex-3

#flex-4

#flex-5



API

Use the returned instance to access two methods that control the split: setSizes and collapse, a method for getting the current sizes: getSizes and a method for destroying the split: destroy.

var instance = Split(['#fourteen', '#fifteen', '#sixteen'], {
    sizes: [50, 25, 25]
});

instance.setSizes([33.3, 33.3, 33.3]);  // Set Sizes 33%
instance.collapse(0);  // Collapse First
instance.collapse(1);  // Collapse Second
instance.collapse(2);  // Collapse Third
instance.getSizes();  // Get Sizes
instance.setSizes([50, 25, 25]);  // Reset
instance.destroy();  // Destroy

#fourteen

#fifteen

#sixteen




JSFiddle style is also possible: Demo.