CSS Transition - Show div smoothly

Question

Here's the idea: A div on top which is hidden by default and will slide down, pushing other content, by the click of a button. Another click will slide the div to be hidden again, raising the other content.

HTML

<div id="topDiv" class="hidden">
    Some content<br>
    More very complex content
</div>
<button id="thebutton" onclick="toggle('topDiv');">Toggle the div</button>
<div id="bottomDiv">
    Some content<br>
    More content!<br>
    Even more content!<br>
</div>

CSS

div.hidden {
    height: 0px;
}
div {
    height: 400px;
    transition: height 0.5s;
}

Javascript

function toggle(someId) {
    var someElem = document.getElementById(someId);
    someElem.className = someElem.className == 'hidden' ? '' : 'hidden';
}

The issue here is that the content of the div that I want to be hidden is shown. If I alter div.hidden to have display: none; or visibility: hidden; then I lose the "sliding" effect.

I would like to have a solution that does not use jQuery.

Answer 1

Add overflow:hidden on the div.