slide-down
Syntax
slide-down: selector [every (time)] [after (time)][, (selector)...];
selector = The container to expand to full height which has no set height and has a height of "auto".
The slide-up and slide-down commands allow an element which has "height: auto;" to work with CSS transitions. CSS alone does not support height transitions on elements where height would be "auto" by default.
The slide-down command expands the element(s) referenced by the selector to its full height. You still need a CSS transition to get a smooth slide, by using the CSS transition command.
The CSS transition command used in the example below demonstrates how this is done. Take the time to search the internet for "CSS transitions".
Technically, behind the scenes the height is manually set to the final height that it will reach, which allows the expanding CSS transition to take effect. After the transition has completed, the height is set back to auto to allow for changes in device orientation which may alter the final height due to a reduced or expanded width.