As time progresses, CSS is becoming more and more powerful with features which once required extensive javascript coding or jquery plugins.
One such feature is the slide up or slide down of any element on your page.
For a simple slideup or slidedown (while making the element visible or hidden), we can use a simple CSS code what uses transition to make it look cool too.
Here’s the link to github repo for this code:
https://github.com/nabtron/lib-css/blob/master/slideup-slidedown/non-jquery2.html
Unlike several other codes out there which ask you to set an average height for the element, this one has special javascript code added to it to get the height of the element dynamically.
Note that the direction of slide while getting visible or hidden would depend on the position of the element. E.g. if you use bottom: 0 or 5, it will slide from down to up when becoming visible. However if you don’t use that value, it will slide from up to down when it’s becoming visible on top.
I hope you enjoy this piece of code. Let me know if you have any query.