How to Transition Height from 0 to auto Using CSS
Topic: HTML / CSSPrev|Next
Answer: Use CSS transition and max-height Property
You can simply use the CSS transition in combination with the max-height property to transition height: 0; to height: auto; of a block-level element (such as <div> element). Just set the value of the max-height property to a value that is bigger than your element's box will ever get.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Height Transition from 0 to Auto</title>
<style>
.collapsible{
max-height: 0;
transition: max-height 0.5s ease-out;
background: #f5f5f5;
overflow: hidden;
}
.toggler:hover + .collapsible{
max-height: 600px; /* Adjust according to your content */
transition: max-height 0.5s ease-in;
}
</style>
</head>
<body>
<div id="menu">
<button type="button" class="toggler">Hover me</button>
<div class="collapsible">
<p>Lorem ipsum dolor sit amet, nam eu sem tempor varius...</p>
</div>
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
