You cannot animate to a height of auto
. You have to calculate that height, perhaps by placing it offscreen and using clientHeight
or the appropriate measurement, save it to a variable, and toggle it using that variable
var market = document.getElementById("market"),
market_ = document.getElementById("market_"),
// Save the heights
marketHeight = market.clientHeight,
market_Height = market_.clientHeight;
// Remove the height of market_
market_.style.height = "0px";
function showservices() {
market.style.transition="height 3s ease-in";
market_.style.transition="height 3s ease-in";
market.style.height = "0px";
// In essence animates to the "auto" value, but is an actual pixel value
market_.style.height = market_Height + "px";
}
showservices();
Note: If the height of the toggled variable varies on widow resize then you will have to calculate its height each time, likely within a window.onresize
function