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.

Hi there

elements
An array of HTML elements or query selectors to create the split with. All elements must have a common, immediate parent. A mix of elements and query selectors can be used.

With no other options, elements are split evenly over the size of the parent.

Split(['#c', '#d']);

Split([document.getElementById('c'), '#d']);

Split([document.getElementById('c'), document.getElementById('d')]);

sizes
An array of integers/floats corresponding to inital percentage of parent size, or CSS values. Number of values in array must match the number of elements in the split.

CSS values are not recommended, sizes and gutters can only be calculated automatically with numeric percentage values.

Split(['#e', '#f'], {
    sizes: [40, 60]
});

Split(['#e', '#f'], {
    sizes: ['40%', '60%']  // not recommended
});

Split(['#e', '#f'], {
    sizes: ['380px', '580px']  // not recommended
});

minSize 100
The minimum size of each element in the split in pixels. Elements can not be dragged smaller than the minimum size. If the minimum size is 0, the element will be hidden with display:none until it is dragged again.

Minimum sizes can be specified as a number or array, in which case each element's minimum size is set individually.

Split(['#g', '#h'], {
    minSize: 0
});

Split(['#g', '#h'], {
    minSize: [300, 50]
});

gutterSize 10
The gutter size between each split in pixels.

Split(['#i', '#j'], {
    gutterSize: 20
});

snapOffset 30
The offset from the minimum size where dragging snaps to the minimum size. Set to 0 to disable snapping.

Split(['#k', '#l'], {
    snapOffset: 0
});

direction 'horizontal'
The direction to split in. Either 'horizontal' or 'vertical'.

Split(['#k', '#l'], {
    direction: 'vertical'
});

cursor 'ew-resize'
The cursor to switch to when dragging. Defaults to 'ew-resize' to horizontal splits and 'ns-resize' for vertical splits.

Cursors when not dragging need to be set in CSS.

Split(['#o', '#p'], {
    cursor: 'grabbing'
});

callbacks
onDrag, onDragStart, onDragEnd callbacks.

Split(['#q', '#r'], {
    sizes: [40, 60],
    onDrag: function() {

    },
    onDragStart: function() {

    },
    onDragEnd: function() {

    }
})

multiple splits
The cursor to switch to when dragging. Defaults to 'ew-resize' to horizontal splits and 'ns-resize' for vertical splits.

Cursors when not dragging need to be set in CSS.

Split(['#s', '#t', '#u']);

zero minSize
The cursor to switch to when dragging. Defaults to 'ew-resize' to horizontal splits and 'ns-resize' for vertical splits.

Cursors when not dragging need to be set in CSS.

Split(['#v', '#w'], {
    minSize: 0
});

zero size
The cursor to switch to when dragging. Defaults to 'ew-resize' to horizontal splits and 'ns-resize' for vertical splits.

Cursors when not dragging need to be set in CSS.

Split(['#s', '#t', '#u']);

Split.js

Options

Examples