I'm attempting to create a smooth transition effect when a button is clicked, similar to a toggle function, where the content below it seamlessly shifts instead of abruptly moving. The classic example of this is the Bootstrap navbar hamburger menu, where clicking on the menu in mobile view causes the items below it to smoothly adjust to make space for the navbar items. Here are the code snippets I've implemented:
let box = document.querySelector("#box");
let seconddiv = document.querySelector("#seconddiv");
box.addEventListener("click", myfunc);
function myfunc() {
if(seconddiv.style.display == "none") {
seconddiv.style.display = "block";
}
else {
seconddiv.style.display = "none"
}
}#box {
height: 50px;
width: 50px;
background-color: red
}
#seconddiv {
display: none;
}<div id="box">
</div>
<div id="seconddiv">
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
</div>
<p>hello</p>When I click on the red box, the "hello" text moves instantly when the "seconddiv" display is set. Is there a way to achieve a smoother transition for the movement of the "hello" text like in Bootstrap?