Here's the concept: A hidden div that slides down, pushing other content, when a button is clicked. Clicking the button again will hide the div and raise the other content.
HTML
<div id="topDiv" class="hidden">
Some content<br>
More 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 current issue is that the content of the hidden div is still shown. If I change div.hidden to have display: none; or visibility: hidden;, the "sliding" effect is lost.
I'm looking for a solution without using jQuery.