Growing a div to show injected contents

Wrapper div must be display block, overflow-y: hidden, height: 0. Inject contents into inner wrapper. Measure height of inner wrapper. Animate wrapper to that height. Fade in the inner wrapper.

by andfinally

HTML

<div id="wrapper">
    <div id="inWrap">
        
    </div>
</div>

<a id="inject">Inject</a>

CSS

#wrapper {
    display: block;
    height: 0;
    overflow-y: hidden;
    border: 1px solid #ccc;
    margin: 50px;
}

#inWrap {
    display: block;   
}

#inject {
    margin: 100px;
    background: black;
    color: white;
    cursor: pointer;
    padding: 10px;
}

JavaScript

$('inject').addEvent('click', function() {
   
    var filler = new Element('div', {'id': 'filler', 'style': 'height:300px;width:400px;padding:20px;background:red;border:10px solid blue;'});
    filler.inject($('inWrap'));

    var wrapper = $('wrapper');
    var inWrap = $('inWrap');
    var oldHeight = wrapper.getComputedSize().totalHeight;
    var newHeight = inWrap.getComputedSize().totalHeight;
    
    wrapper.tween('height', oldHeight, newHeight);
    
});