CSS過渡-順利顯示div

Question

這是一個想法：頂部的div默認情況下是隱藏的，單擊按鈕將向下滑動， 推動其他內容 。 再次單擊將滑動div以再次隱藏，從而引發其他內容。

的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;
}

Java腳本

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

這里的問題是顯示了我要隱藏的div的內容。 如果我將div.hidden更改為display: none; 或visibility: hidden; 然后我失去了“滑動”效果。

我想要一個不使用jQuery的解決方案。

Answer 1

添加overflow:hidden在div上。