How to Transition Height from 0 to auto Using CSS

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:

Previous Page Next Page

How to Transition Height from 0 to auto Using CSS

Answer: Use CSS transition and max-height Property

Example

Related FAQ

About Us

Contact

Interactive Tools

Answer: Use CSS `transition` and `max-height` Property