CSS3 show/hide animation

by wittnl

HTML

<div id="expando" class="closed"><span></span>
</div>

CSS

#expando span { display:block; padding: 25%; }

#expando {
    background: #FFCC00;
    overflow: hidden;
    transition: max-height 1s;
    max-height: 999px;
}

#expando.closed {
    max-height: 0;
}

JavaScript

$(document).ready(function() {
    var $expando = $(expando);
    $(this).on('click', function() {
        $expando.toggleClass('open closed');
    });
});