@faruking
Posted
I would have told you to use the animation feature of CSS but you can't animate the display and height property of CSS. There are however other ways to achieve the desired result. Let's use plain Javascript code. Add the code below to your javascript file(inside the toggle(i) function after the second line).
let id = null;
let pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 50) {
clearInterval(id);
} else {
pos++;
description[i].style.height = pos + "px";
}
}
Link to explanation Source
Marked as helpful
@tbrownlee
Posted
@faruking Ah I see, thank you! That makes sense.
If I were to go the animation route, what element/s would I animate and how so?
@faruking
Posted
@tbrownlee The property you are going to animate is the max-height. Initially set the height of the element you want to animate to 0, then you gradually increase the max-height of the element to whatever you desire. Add this to your CSS code.
@keyframes mymove {
from {max-height: 0px;}
to {max-height: 600px;}
}
and add this at the end of your description class
animation: mymove 5s 1 ;
Marked as helpful
@tbrownlee
Posted
@faruking it works great!! Thank you for your advice!
@faruking
Posted
@tbrownlee You are welcome. Looking forward to more of your works.
