How to make horizontal splitter with jQuery UI Resizable()

Question

Horizontal line / handle, that once clicked and dragged, makes upper div decrease in size while bottom div increase, and vice versa. The idea is to implement a similar splitter to the one present on JSFiddle four windows interface.

Answer 1

The implementation Demo on JSFiddle is here

Javascript:

$(function() {
var bottomElem = $(".resizable-bottom");
var bottomElemOriginalHeight = bottomElem.height();
$(".resizable-top").resizable({
    handles: 's',
    resize: function(event, ui) {
        bottomElem.height(bottomElemOriginalHeight - (ui.element.outerHeight() - ui.originalSize.height));

    },
    stop: function(event, ui) {
        bottomElemOriginalHeight = bottomElem.height();
    },
    //This has the effect of minHeight for bottomElem
    maxHeight: $(".resizable-top").height()

});

});