jquery resize

stacked elements preserving space

by David McClelland

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="divTest"><div id="divHeight">height: </div></div>
<div id="divTest2"><div id="divHeight2">height: </div></div>

CSS

body
{
    padding:0px;
}

#divTest
{
    width: 100%;
    /*height: 0px;*/
    color:white;
    overflow:hidden;
    padding:0px 0px 10px 0px;
    background:url("http://dtm.dijitheme.com/static/button_thin_arrow_down.png") bottom no-repeat;
    background-color:silver;
} 
#divTest2
{
    width: 100%;
    /*height: 0px;*/
    color:white;
    overflow:hidden;
    padding:0px 0px 10px 0px;
    background:url("http://dtm.dijitheme.com/static/button_thin_arrow_down.png") bottom no-repeat;
    background-color:silver;
} 
#divHeight
{
    height:40px;
}
#divHeight2
{
    height:40px;
}
.ui-resizable-s {
  background-color:orange;
    bottom: 0;
    height: 10px;
}

JavaScript

$(document).ready( function() {
    $( "#divTest" ).resizable({
        maxHeight: 200,
        maxWidth: 100,
        minHeight: 0,
        minWidth: 100,
        handles:'s',
        resize: function(event, ui) {
            $( "#divHeight" ).empty().append("height: " + $(this).height());
        }
    });
    $( "#divTest2" ).resizable({
        maxHeight: 200,
        maxWidth: 100,
        minHeight: 0,
        minWidth: 100,
        handles:'s',
        resize: function(event, ui) {
            $( "#divHeight2" ).empty().append("height: " + $(this).height());
        }
    });
    
    $('.ui-resizable-s').dblclick(function(){alert('clicked bottom handle');})
    
});