Javascript CSS转换-平滑显示div

这里的想法是：一个div在顶部，默认情况下是隐藏的，点击一个按钮，它会向下滑动，按下其他内容。再次单击将滑动要再次隐藏的div，从而提升其他内容

HTML Javascript 这里的问题是显示了我想要隐藏的div的内容。如果我将

div.hidden

更改为具有

显示：无或<代码>可见性：隐藏然后我失去了“滑动”效果

我希望有一个不使用jQuery的解决方案。
在div上添加
溢出：隐藏
。
在div上添加
溢出：隐藏
。
作为旁注：请记住Webkit浏览器不支持不固定的转换，因此也添加一个-Webkit转换行。附录：，但这还不包括所有的机器人和iDevices，所以暂时保持前缀。考虑到这个答案最近得到了更新：
transition
不再需要在合理的最新浏览器上使用任何前缀。不久前，我已经停止在新网站中添加前缀。附带说明：请记住，Webkit浏览器不支持不固定的转换，因此也可以添加-Webkit转换行。附录：，但这还不包括所有的机器人和iDevices，所以暂时保持前缀。考虑到这个答案最近得到了更新：
transition
不再需要在合理的最新浏览器上使用任何前缀。我很久以前就不再在新的网站上加前缀了。
<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>

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

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