SPLIT PANES / DOCKER allow you to display multiple areas, either side by side or one on top of each other. Nested layouts are often part of it. By dragging a divider that appears between the areas, the user can specify how much of the total width / height goes to each area.

I have been building a backend interface in the past weeks, that forced me to look into ways to organize the workspace more efficiently . I could code my own splitter, but is not a priority right now and makes no sense to always reinvent the wheel :)

Here some of the options out there…

Pure jQuery UI

This uses the jQuery UI draggable component and provides limited options :)

 $('.splitter').draggable({
    axis: 'x',
    containment: '#content',
    distance: 0,
    drag: function(event, ui) {
      var width = $('#content').width();
      $('#content .leftpane').css({ width: ui.position.left + 'px' });
      $('#content .rightpane').css({
        left: ui.position.left + 1 + 'px',
        width: (width - ui.position.left + 1) + 'px'
      });
    },
    refreshPositions: true,
    scroll: false
  });

$('.splitter').draggable({

axis: 'x',

containment: '#content',

distance: 0,

drag: function(event, ui) {

var width = $('#content').width();

$('#content .leftpane').css({ width: ui.position.left + 'px' });

$('#content .rightpane').css({

left: ui.position.left + 1 + 'px',

width: (width - ui.position.left + 1) + 'px'

});

refreshPositions: true,

scroll: false

});

jQuery UI

Layout, has not been updated for a long time, but still provides a huge amount of options and methods to handle almost anything. Version 2.0 was announced, but never showed up. Google Groups / GitHub / Documentation
ProPanelLayout (Commercial)

Splitter / Split Pane / Docker options

Pure jQuery UI

jQuery UI

jQuery Plugins

Pure Jasvascript

CSS only

Enjoy coding …

Alexander