[danik.js]

<style>
    div{
        height: 100px;
        background: red;
        overflow: hidden;
        transition: height 2s;
    }
    div.collapsed{
        height: 0;
    }
</style>
<button id="button">Toggle</button>
<div id="sample"></div>
<script>
    button.onclick = function() {
        sample.classList.toggle('collapsed');
    }
</script>

classList может быть не во всех браузерах - смотри на caniuse.com и если что подключай костыль или пиши свои функции работы с классами.

transition дублируй с префиксами -webkit, -moz, -ms.

Вобще, с animation возможносей больше.