I try to implement a slideDown and slideUp function without using jquery.
Here is a simplifyed fiddle of my HTML. https://codepen.io/michaelkonstreu/pen/eYmOmMX
You can use hideElement() and showElement() to slide up and down the 2nd element. But as you will notice, the animation is not as smooth as I wish. Using jQuery's implemented functions, this works pretty fine but I would like to realize it without using JQ.
The main problem is the element's height. Each element can contain different content (numbers,text, images ...), so their height is not fixed.
At first, I tried to realize this functions using CSS in different common ways (transitions with height/max-height/flex-grow). But it seems that my structure in combination with flex boxes causes the trubble. Also the following vanilla js solutions doesn't work: https://w3bits.com/javascript-slidetoggle/
https://gist.github.com/ludder/4226288
So how I have to edit my js functions to run the slideDown() and slideUp() animation similar to jquery's implementation?