CSS Transition height example

by Matthew Marcus

HTML

<button id="change">Change</button>
<div><span>foo</span></div>

CSS

div{
    height: 50px;
    background: red;
    transition: height 500ms;
}

div.changed{
    height: 100px;
}

JavaScript

$(document).ready(function(){
    var $div = $('div');
    $('#change').click(function(){
        $div.toggleClass('changed');
    });
});