How can I transition height: 0; to height: auto; using CSS?

Question 1

I am trying to make a <ul> slide down using CSS transitions.

The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition,

If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height.

How else could I do this without using JavaScript?

#child0 {
 height: 0;
 overflow: hidden;
 background-color: #dedede;
 -moz-transition: height 1s ease;
 -webkit-transition: height 1s ease;
 -o-transition: height 1s ease;
 transition: height 1s ease;
}
#parent0:hover #child0 {
 height: auto;
}
#child40 {
 height: 40px;
 overflow: hidden;
 background-color: #dedede;
 -moz-transition: height 1s ease;
 -webkit-transition: height 1s ease;
 -o-transition: height 1s ease;
 transition: height 1s ease;
}
#parent40:hover #child40 {
 height: auto;
}
h1 {
 font-weight: bold;
}

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
 <h1>Hover me (height: 0)</h1>
 <div id="child0">Some content
 <br>Some content
 <br>Some content
 <br>Some content
 <br>Some content
 <br>Some content
 <br>
 </div>
</div>
<hr>
<div id="parent40">
 <h1>Hover me (height: 40)</h1>
 <div id="child40">Some content
 <br>Some content
 <br>Some content
 <br>Some content
 <br>Some content
 <br>Some content
 <br>
 </div>
</div>

Question 2

I believe the height:auto/max-height solution will only work if you're expanding area is greater than the height you want to restrict. If you have a max-height of 300px, but a combo box dropdown, which can return 50px, then max-height won't help you, 50px is variable depending on the number of elements, you can arrive to an impossible situation where I can't fix it because the height is not fixed, height:auto was the solution, but I can't use transitions with this.

Question 3

OP is trying for css solution, not js, otherwise they could just use overflow and animate

Question 4

@VIDesignz: But inner div's -100% margin-top receives the width of the wrapper div, not the height. So this solution has the same kind of problem, that the max-height solution. Moreover when the width is smaller than the height of the content, not all content is hidden by -100% margin-top. So this is a wrong solution.

Question 5

See github.com/w3c/csswg-drafts/issues/626 for discussion around the spec and implementation of a proper solution

Question 6

The flexbox/grid way: keithjgrant.com/posts/2023/04/transitioning-to-height-auto

Question 7

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: #d5d5d5;
}
#menu:hover #list {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

<div id="menu">
 <a>hover me</a>
 <ul id="list">
 <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 </ul>
</div>

Question 8

this works great! except there is a delay when it starts, because it starts for max-height which initially is very high..hmm, i think this is somewhat annoying

Question 9

+1 Great solution! The speed of the transition is calculated is calculated as the time you specify to transition to the max-height value... but since height will be less than max-height, the transition to actual height will occur faster (often significantly) than the time specified.

Question 10

Note that this may cause ugly transition ending when you have to use values that are much bigger than the actual computed value. I noticed this while trying to make a div grow from 0 height to the content height that varies greatly due to different screen sizes(2 lines on my 2560x1440 monitor vs >10 lines on a smartphone). For this I ended up going with js.

Question 11

Very ugly solution since it creates a delay in one direction but not the other.

Question 12

This is a pretty lazy solution. I'm assuming OP wants to use height : auto because the expanded height of the container is somewhat unpredictable. This solution will cause a delay before the animation becomes visible. Additionally the visible duration of the animation will be unpredictable. You'll get much more predictable (and likely smoother) results by calculating the combined height of each of the containers child nodes and then easing to an exact height value.

Question 13

You should use scaleY instead.

ul {
 background-color: #eee;
 transform: scaleY(0); 
 transform-origin: top;
 transition: transform 0.26s ease;
}
p:hover ~ ul {
 transform: scaleY(1);
}

<p>Hover This</p>
<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>

I've made a vendor prefixed version of the above code on jsfiddle, and changed your jsfiddle to use scaleY instead of height.

Edit Some people do not like how scaleY transforms the content. If that is a problem then I suggest using clip instead.

ul {
 clip: rect(auto, auto, 0, auto);
 position: absolute;
 margin: -1rem 0;
 padding: .5rem;
 color: white;
 background-color: rgba(0, 0, 0, 0.8);
 transition-property: clip;
 transition-duration: 0.5s;
 transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
 clip: rect(auto, auto, 10rem, auto);
}

<h3>Hover here</h3>
<ul>
 <li>This list</li>
 <li>is clipped.</li>
 <li>A clip transition</li>
 <li>will show it</li>
</ul>
<p>
 Some text...
</p>

Question 14

This method only partially achieves the desired effect but doesn't actually remove the space. The transformed box acts like a relatively positioned element - the space is taken up no matter how it is scaled. Check out this jsFiddle which takes your first one and just adds some bogus text at the bottom. Note how the text below it doesn't move up when the box height is scaled to zero.

Question 15

Now it does: jsfiddle.net/gNDX3/1 Basically you need to style your elements according to what you need. There is no silver bullet or widget like behavior in CSS/HTML.

Question 16

While I applaud someone trying different approaches, the real-world effect and complications this solution brings is far worse than the already awful max-height hack. Please do not use.

Question 17

"Now it does" except that the content below the disappearing element jumps up before the element slides away. Could be useful sometimes, however the point of transitions is to smoothly change visuals, not trade one stark jump for another.

Question 18

In effect, using a clip transform is no different than simply setting the max-height value. It still suffers from non-fixed amount of appearent animation delay with highly dynamic content size.

Question 19

You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights.

Update: As per the comment below there is now support for animating elements with intrinsic sizes in Chrome: https://developer.chrome.com/blog/new-in-chrome-129#animate

If you need a workaround for other/older browsers see the highly upvoted answers above.

Question 20

Now it can be done developer.chrome.com/blog/new-in-chrome-129

Question 21

interpolate-size is currently available on Chrome, Edge, Opera but not on the other.

Question 22

I'd strongly recommend against using this. This is not an official CSS standard animation, but just something Google implemented and now uses their browser monopoly to force other browsers to support their non-standard behaviour (like IE in the old days)

Question 23

The solution that I've always used was to first fade out, then shrink the font-size, padding and margin values. It doesn't look the same as a wipe, but it works without a static height or max-height.

Working example:

/* final display */
#menu #list {
 margin: .5em 1em;
 padding: 1em;
}
/* hide */
#menu:not(:hover) #list {
 font-size: 0;
 margin: 0;
 opacity: 0;
 padding: 0;
 /* fade out, then shrink */
 transition: opacity .25s,
 font-size .5s .25s,
 margin .5s .25s,
 padding .5s .25s;
}
/* reveal */
#menu:hover #list {
 /* unshrink, then fade in */
 transition: font-size .25s,
 margin .25s,
 padding .25s,
 opacity .5s .25s;
}

<div id="menu">
 <b>hover me</b>
 <ul id="list">
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 </ul>
</div>
<p>Another paragraph...</p>

Question 24

If you have buttons or any other non-text elements you will end up with unwanted whitespace while not hovering.

Question 25

You can further refine it by selecting all child elements with * and applying other changes. Buttons should've been affected by my above code, however, if they were correctly styled with em.

Question 26

Don't do this. This is not GPU accelerated and will result in very janky animations (as demonstrated by the snippet in this answer).

Question 27

This is a CSS-only solution with the following properties:

There is no delay at the beginning, and the transition doesn't stop early. In both directions (expanding and collapsing), if you specify a transition duration of 300ms in your CSS, then the transition takes 300ms, period.
It's transitioning the actual height (unlike transform: scaleY(0)), so it does the right thing if there's content after the collapsible element.
While (like in other solutions) there are magic numbers (like "pick a length that is higher than your box is ever going to be"), it's not fatal if your assumption ends up being wrong. The transition may not look amazing in that case, but before and after the transition, this is not a problem: In the expanded (height: auto) state, the whole content always has the correct height (unlike e.g. if you pick a max-height that turns out to be too low). And in the collapsed state, the height is zero as it should.

Demo

Here's a demo with three collapsible elements, all of different heights, that all use the same CSS. You might want to click "full page" after clicking "run snippet". Note that the JavaScript only toggles the collapsed CSS class, there's no measuring involved. (You could do this exact demo without any JavaScript at all by using a checkbox or :target). Also note that the part of the CSS that's responsible for the transition is pretty short, and the HTML only requires a single additional wrapper element.

$(function () {
 $(".toggler").click(function () {
 $(this).next().toggleClass("collapsed");
 $(this).toggleClass("toggled"); // this just rotates the expander arrow
 });
});

.collapsible-wrapper {
 display: flex;
 overflow: hidden;
}
.collapsible-wrapper:after {
 content: '';
 height: 50px;
 transition: height 0.3s linear, max-height 0s 0.3s linear;
 max-height: 0px;
}
.collapsible {
 transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
 margin-bottom: 0;
 max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
 margin-bottom: -2000px;
 transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
 visibility 0s 0.3s, max-height 0s 0.3s;
 visibility: hidden;
 max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
 height: 0;
 transition: height 0.3s linear;
 max-height: 50px;
}
/* END of the collapsible implementation; the stuff below
 is just styling for this demo */
#container {
 display: flex;
 align-items: flex-start;
 max-width: 1000px;
 margin: 0 auto;
} 
.menu {
 border: 1px solid #ccc;
 box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 margin: 20px;
 
}
.menu-item {
 display: block;
 background: linear-gradient(to bottom, #fff 0%,#eee 100%);
 margin: 0;
 padding: 1em;
 line-height: 1.3;
}
.collapsible .menu-item {
 border-left: 2px solid #888;
 border-right: 2px solid #888;
 background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
 background: linear-gradient(to bottom, #aaa 0%,#888 100%);
 color: white;
 cursor: pointer;
}
.menu-item.toggler:before {
 content: '';
 display: block;
 border-left: 8px solid white;
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent;
 width: 0;
 height: 0;
 float: right;
 transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
 transform: rotate(90deg);
}
body { font-family: sans-serif; font-size: 14px; }
*, *:after {
 box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
 <div class="menu">
 <div class="menu-item">Something involving a holodeck</div>
 <div class="menu-item">Send an away team</div>
 <div class="menu-item toggler">Advanced solutions</div>
 <div class="collapsible-wrapper collapsed">
 <div class="collapsible">
 <div class="menu-item">Separate saucer</div>
 <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
 <div class="menu-item">Ask Worf</div>
 <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
 <div class="menu-item">Ask Q for help</div>
 </div>
 </div>
 <div class="menu-item">Sweet-talk the alien aggressor</div>
 <div class="menu-item">Re-route power from auxiliary systems</div>
 </div>
 <div class="menu">
 <div class="menu-item">Something involving a holodeck</div>
 <div class="menu-item">Send an away team</div>
 <div class="menu-item toggler">Advanced solutions</div>
 <div class="collapsible-wrapper collapsed">
 <div class="collapsible">
 <div class="menu-item">Separate saucer</div>
 <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
 </div>
 </div>
 <div class="menu-item">Sweet-talk the alien aggressor</div>
 <div class="menu-item">Re-route power from auxiliary systems</div>
 </div>
 <div class="menu">
 <div class="menu-item">Something involving a holodeck</div>
 <div class="menu-item">Send an away team</div>
 <div class="menu-item toggler">Advanced solutions</div>
 <div class="collapsible-wrapper collapsed">
 <div class="collapsible">
 <div class="menu-item">Separate saucer</div>
 <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
 <div class="menu-item">Ask Worf</div>
 <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
 <div class="menu-item">Ask Q for help</div>
 <div class="menu-item">Separate saucer</div>
 <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
 <div class="menu-item">Ask Worf</div>
 <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
 <div class="menu-item">Ask Q for help</div>
 </div>
 </div>
 <div class="menu-item">Sweet-talk the alien aggressor</div>
 <div class="menu-item">Re-route power from auxiliary systems</div>
 </div>
</div>

How does it work?

There are in fact two transitions involved in making this happen. One of them transitions the margin-bottom from 0px (in the expanded state) to -2000px in the collapsed state (similar to this answer). The 2000 here is the first magic number, it's based on the assumption that your box won't be higher than this (2000 pixels seems like a reasonable choice).

Using the margin-bottom transition alone by itself has two issues:

If you actually have a box that's higher than 2000 pixels, then a margin-bottom: -2000px won't hide everything -- there'll be visible stuff even in the collapsed case. This is a minor fix that we'll do later.
If the actual box is, say, 1000 pixels high, and your transition is 300ms long, then the visible transition is already over after about 150ms (or, in the opposite direction, starts 150ms late).

Fixing this second issue is where the second transition comes in, and this transition conceptually targets the wrapper's minimum height ("conceptually" because we're not actually using the min-height property for this; more on that later).

Here's an animation that shows how combining the bottom margin transition with the minimum height transition, both of equal duration, gives us a combined transition from full height to zero height that has the same duration.

animation as described above

The left bar shows how the negative bottom margin pushes the bottom upwards, reducing the visible height. The middle bar shows how the minimum height ensures that in the collapsing case, the transition doesn't end early, and in the expanding case, the transition doesn't start late. The right bar shows how the combination of the two causes the box to transition from full height to zero height in the correct amount of time.

For my demo I've settled on 50px as the upper minimum height value. This is the second magic number, and it should be lower than the box' height would ever be. 50px seems reasonable as well; it seems unlikely that you'd very often want to make an element collapsible that isn't even 50 pixels high in the first place.

As you can see in the animation, the resulting transition is continuous, but it is not differentiable -- at the moment when the minimum height is equal to the full height adjusted by the bottom margin, there is a sudden change in speed. This is very noticeable in the animation because it uses a linear timing function for both transitions, and because the whole transition is very slow. In the actual case (my demo at the top), the transition only takes 300ms, and the bottom margin transition is not linear. I've played around with a lot of different timing functions for both transitions, and the ones I ended up with felt like they worked best for the widest variety of cases.

Two problems remain to fix:

the point from above, where boxes of more than 2000 pixels height aren't completely hidden in the collapsed state,
and the reverse problem, where in the non-hidden case, boxes of less than 50 pixels height are too high even when the transition isn't running, because the minimum height keeps them at 50 pixels.

We solve the first problem by giving the container element a max-height: 0 in the collapsed case, with a 0s 0.3s transition. This means that it's not really a transition, but the max-height is applied with a delay; it only applies once the transition is over. For this to work correctly, we also need to pick a numerical max-height for the opposite, non-collapsed, state. But unlike in the 2000px case, where picking too large of a number affects the quality of the transition, in this case, it really doesn't matter. So we can just pick a number that is so high that we know that no height will ever come close to this. I picked a million pixels. If you feel you may need to support content of a height of more than a million pixels, then 1) I'm sorry, and 2) just add a couple of zeros.

The second problem is the reason why we're not actually using min-height for the minimum height transition. Instead, there is an ::after pseudo-element in the container with a height that transitions from 50px to zero. This has the same effect as a min-height: It won't let the container shrink below whatever height the pseudo-element currently has. But because we're using height, not min-height, we can now use max-height (once again applied with a delay) to set the pseudo-element's actual height to zero once the transition is over, ensuring that at least outside the transition, even small elements have the correct height. Because min-height is stronger than max-height, this wouldn't work if we used the container's min-height instead of the pseudo-element's height. Just like the max-height in the previous paragraph, this max-height also needs a value for the opposite end of the transition. But in this case we can just pick the 50px.

Tested in Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (except for a flexbox layout issue with my demo that I didn't bother debugging), and Safari (Mac, iOS). Speaking of flexbox, it should be possible to make this work without using any flexbox; in fact I think you could make almost everything work in IE7 – except for the fact that you won't have CSS transitions, making it a rather pointless exercise.

Question 28

I wish you could shorten (simplify) your solution, or the code example at least - it looks like 90% of the code example isn't relevant to your answer.

Question 29

For someone on a learning mission it is a good answer, for several reasons. First, it has complete "real life" code exxample. Someone could take that code, experiment with it, and learn more. And the detail in the explination...perfectly detailed. thank you, @balpha , for taking the time for this answer :)

Question 30

Incredible ! This actually works perfectly, and with some modifications it also fits my use case of a collapsed element not being at 0 height (in my case a grid only showing one row when collapsed, and showing all rows when opened). Not only that but it seems easy to implement in a variety of contexts, can be "plugged in" existing pages without having to change too much of the parent and child elements, which a lot of other solutions can't do.

Question 31

Appreciate all the thoroughness, but, being a bit of a stickler here, the animation looks and feels bad. Not a smooth timing function at the end of the day. Is that inherent to this approach?

Question 32

@StevenLu To an extent, yes. I address this question in my answer, see the sentence starting with "This is very noticeable in the animation ..."

Question 33

You can, with a little bit of non-semantic jiggery-pokery. My usual approach is to animate the height of an outer DIV which has a single child which is a style-less DIV used only for measuring the content height.

function growDiv() {
 var growDiv = document.getElementById('grow');
 if (growDiv.clientHeight) {
 growDiv.style.height = 0;
 } else {
 var wrapper = document.querySelector('.measuringWrapper');
 growDiv.style.height = wrapper.clientHeight + "px";
 }
}

#grow {
 -moz-transition: height .5s;
 -ms-transition: height .5s;
 -o-transition: height .5s;
 -webkit-transition: height .5s;
 transition: height .5s;
 height: 0;
 overflow: hidden;
 outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
 <div class='measuringWrapper'>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 </div>
</div>

One would like to just be able to dispense with the .measuringWrapper and just set the DIV's height to auto and have that animate, but that doesn't seem to work (the height gets set, but no animation occurs).

function growDiv() {
 var growDiv = document.getElementById('grow');
 if (growDiv.clientHeight) {
 growDiv.style.height = 0;
 } else {
 growDiv.style.height = 'auto';
 }
}

#grow {
 -moz-transition: height .5s;
 -ms-transition: height .5s;
 -o-transition: height .5s;
 -webkit-transition: height .5s;
 transition: height .5s;
 height: 0;
 overflow: hidden;
 outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
 <div>
 The contents of my div.
 </div>
</div>

My interpretation is that an explicit height is needed for the animation to run. You can't get an animation on height when either height (the start or end height) is auto.

Question 34

Since this relies on javascript, you could also easily add the measuringWrapper using javascript too!

Question 35

You can do it without wrapper. Just: function growDiv() { var growDiv = document.getElementById('grow'); if (growDiv.clientHeight) { growDiv.style.height = 0; } else { growDiv.style.height = growDiv.scrollHeight+'px'; } }

Question 36

I prefer this method because it is precise. I also like to adjust the folding element's transition speed based on the computed height. That way tall elements take proportionately longer to unfold than short ones. i.e. folder.style.transition = `height ${maxHeight}ms`;

Question 37

I think this is the best solution if you don't mind using javascript. There are a few ways with plain css but they all have some pretty big drawbacks.

Question 38

Browsers have moved on a fair bit since this question was first raised. You can now transition grid track sizes and it is very well supported meaning that this problem can be solved using CSS Grid Layout

Here I am transitioning the second grid item from 0fr (0 Fractional Units) to 1fr (1 Fractional Units).

#parent0 {
 display: grid;
 grid-template-rows: min-content 0fr;
 transition: grid-template-rows 500ms;
}
#child0 { 
 background-color: #dedede;
 overflow: hidden;
}
#parent0:hover{
 grid-template-rows: min-content 1fr;
}

<div id="parent0">
 <h1>Hover me</h1>
 <div id="child0">Some content
 <br>Some content
 <br>Some content
 <br>Some content
 <br>Some content
 </div>
</div>

Question 39

If you prefer a video description Kevin Powell does a great job explaining why this works youtube.com/watch?v=B_n4YONte5A

Question 40

Nice, this is actually a really good solution for my case. Works perfectly without having to define a fixed value for the height. Thanks a lot for sharing! Wonder why this answer has not more upvotes yet

Question 41

seems like it only works when you have 2 child divs, but it seems an empty div as the first will do.

Question 42

You absolute beauty! works 100% percent, don't waste time on other answers. You might need to transition the padding on the child too

Question 43

interpolate-size will be the way to go one day: argyle.ink/interpolate-size I wish there was a way to shim it now.

Question 44

The accepted answer works for most cases, but it doesn't work well when your div can vary greatly in height — the animation speed is not dependent on the actual height of the content, and it can look choppy.

You can still perform the actual animation with CSS, but you need to use JavaScript to compute the height of the items, instead of trying to use auto. No jQuery is required, although you may have to modify this a bit if you want compatibility (works in the latest version of Chrome :)).

window.toggleExpand = function(element) {
 if (!element.style.height || element.style.height == '0px') { 
 element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
 } else {
 element.style.height = '0px';
 }
}

#menu #list {
 height: 0px;
 transition: height 0.3s ease;
 background: #d5d5d5;
 overflow: hidden;
}

<div id="menu">
 <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
 <ul id="list">
 <!-- Works well with dynamically-sized content. -->
 <li>item</li>
 <li><div style="height: 100px; width: 100px; background: red;"></div></li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 </ul>
</div>

Question 45

@Coderer you could use clientHeight

Question 46

This has a very nice result. But the JavaScript looks like machine code for the most part. How could you re-write the code as though you are speaking English (readable code)?

Question 47

also you can use scrollHeight when the height is 0.

Question 48

This is my favourite answer. But for the height calculation, I use scrollHeight as @MMD suggested, like this: element.style.height = element.scrollHeight + 'px'

Question 49

My workaround is to transition max-height to the exact content height for a nice smooth animation, then use a transitionEnd callback to set max-height to 9999px so the content can resize freely.

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed
// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
 if(content.hasClass('open')){
 content.css('max-height', 9999); // try setting this to 'none'... I dare you!
 }
});
$('#toggle').on('click', function(e){
 content.toggleClass('open closed');
 content.contentHeight = content.outerHeight();
 
 if(content.hasClass('closed')){
 
 // disable transitions & set max-height to content height
 content.removeClass('transitions').css('max-height', content.contentHeight);
 setTimeout(function(){
 
 // enable & start transition
 content.addClass('transitions').css({
 'max-height': 0,
 'opacity': 0
 });
 
 }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
 // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
 
 }else if(content.hasClass('open')){ 
 
 content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
 content.css({
 'max-height': content.contentHeight,
 'opacity': 1
 });
 
 }
});

.transitions {
 transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
}
body {
 font-family:Arial;
 line-height: 3ex;
}
code {
 display: inline-block;
 background: #fafafa;
 padding: 0 1ex;
}
#toggle {
 display:block;
 padding:10px;
 margin:10px auto;
 text-align:center;
 width:30ex;
}
#content {
 overflow:hidden;
 margin:10px;
 border:1px solid #666;
 background:#efefef;
 opacity:1;
}
#content .inner {
 padding:10px;
 overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
 <div class="inner">
 <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
 <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
 <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
 <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
 </div>
</div>
<br />
<button id="toggle">Challenge Accepted!</button>

Question 50

This for me is ugly but the best solution for animating a height change, as all the others have compromises. However adding a subsequent animation e.g. back to the original height becomes difficult. I found if I set the height back to scrollHeight and then immediately to 0, Chrome doesn’t consistently animate it because of how quickly the properties change. Adding a timeout between the two changes worked, but the magic delay number is unknown and it adds an uncomfortable delay to the transition. Any ideas on a solution for that?

Question 51

A visual workaround to animating height using CSS3 transitions is to animate the padding instead.

You don't quite get the full wipe effect, but playing around with the transition-duration and padding values should get you close enough. If you don't want to explicitly set height/max-height, this should be what you're looking for.

div {
 height: 0;
 overflow: hidden;
 padding: 0 18px;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 transition: all .5s ease;
}
div.animated {
 height: auto;
 padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/ (riffed off stephband's above jsFiddle)

Question 52

Except that here you aren't animating the height at all. You are animating the padding... it can disappear just fine because it can animate from the current state down to 0, but if you watch closely when it expands it pops open with the text and then the padding only animates.. because it doesn't know how to animate from 0 to auto.... it needs a numerical range... that's how tweening works.

Question 53

I'm not sure how to put this in a way that isn't rude, but... it looks unprofessional. At least stackoverflow.com/a/30531678/340947 makes the motion "continuous" ... but it isn't smooth

Question 54

According to MDN Web Docs, auto values have been intentionally excluded from the CSS transitions spec, so instead of height: auto, use height: 100%, top, or the flex property in grid and flex layouts.

Expanding/collapsing an overlay

.grid-container {
 display: grid;
 position: absolute;
}
.content {
 background: aqua;
 height: 0;
 overflow: hidden;
 transition: 1s;
}
span:hover + .grid-container .content {
 height: 100%;
}

<span>Hover over me!</span>
<div class="grid-container">
 <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<p>Rest of the page content...</p>

Expanding/collapsing a sliding overlay

.grid-container {
 display: grid;
 position: absolute;
 overflow: hidden;
 pointer-events: none; /* to enable interaction with elements below the container */
}
.content {
 background: aqua;
 pointer-events: auto;
 position: relative;
 top: -100%;
 transition: 1s;
}
span:hover + .grid-container .content {
 top: 0;
}

<span>Hover over me!</span>
<div class="grid-container">
 <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<p>Rest of the page content...</p>

Question 55

I was excited about the example: Expanding/collapsing in the document flow but it doesn't work as the container has a defined height so the rest of the content will be affected, the content outside the container,

Question 56

Yea! Thanks for shared, If I think so, in some situations where it does not matter if you overspacing at the end of the content, in the case that the content is a full page, you will always have untold spacing at the end

Question 57

@MarcoMesen: Just edited my example.

Question 58

@Mori in this case it works, but it's often not easy to change the markup of the entire page, to use the body as the flex container and place the expanding/collapsing element right under it, just for this effect. Also, how would you solve two expanding elements next to each other and each element pushes down the same content beneath it?

Question 59

@Sandro it is possible to use divs in place of html and body, but I don't think the issue with two or more elements next to each other can be resolved.

Question 60

Use max-height with different transition easing and delay for each state.

HTML:

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
<ul>

CSS:

#toggled{
 max-height: 0px;
 transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}
#trigger:hover + #toggled{
 max-height: 9999px;
 transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
 transition-delay: 0s;
}

See example: http://jsfiddle.net/0hnjehjc/1/

Question 61

The problem here is, to ensure you have enough space in a dynamic environment, you need to use ridiculous max-heights like 999999px. This, on the other hand, will shift your animation, because the frames are calculated from this value. So you might end up with animation "delay" in one direction and a really fast end in the other direction (corr: timing-functions)

Question 62

No hard coded values.

No JavaScript.

No approximations.

The trick is to use a hidden & duplicated div to get the browser to understand what 100% means.

This method is suitable whenever you're able to duplicate the DOM of the element you wish to animate.

.outer {
 border: dashed red 1px;
 position: relative;
}
.dummy {
 visibility: hidden;
}
.real {
 position: absolute;
 background: yellow;
 height: 0;
 transition: height 0.5s;
 overflow: hidden;
}
.outer:hover>.real {
 height: 100%;
}

Hover over the box below:
<div class="outer">
 <!-- The actual element that you'd like to animate -->
 <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
 </div>
 <!-- An exact copy of the element you'd like to animate. -->
 <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
 </div>
</div>

Question 63

This still takes up space. Good solution for "spoilers" but not good for collapsed content.

Question 64

Update, 2024

I do not recommend my original response, but I will leave it for posterity. Ever since flexbox became widely supported, I have relied on it for solutions to issues like the one in this question.

I recommend this answer, which uses a flex container and a transition between height: 0 and height: 100% to avoid any sort of "magic values".

Original (outdated), from 2016

As I post this there are over 30 answers already, but I feel my answer improves on the already accepted answer by jake.

I was not content with the issue that arises from simply using max-height and CSS3 transitions, since as many commenters noted, you have to set your max-height value very close to the actual height or you'll get a delay. See this JSFiddle for an example of that problem.

To get around this (while still using no JavaScript), I added another HTML element that transitions the transform: translateY CSS value.

This means both max-height and translateY are used: max-height allows the element to push down elements below it, while translateY gives the "instant" effect we want. The issue with max-height still exists, but its effect is lessened. This means you can set a much larger height for your max-height value and worry about it less.

The overall benefit is that on the transition back in (the collapse), the user sees the translateY animation immediately, so it doesn't really matter how long the max-height takes.

Solution as Fiddle

body {
 font-family: sans-serif;
}
.toggle {
 position: relative;
 border: 2px solid #333;
 border-radius: 3px;
 margin: 5px;
 width: 200px;
}
.toggle-header {
 margin: 0;
 padding: 10px;
 background-color: #333;
 color: white;
 text-align: center;
 cursor: pointer;
}
.toggle-height {
 background-color: tomato;
 overflow: hidden;
 transition: max-height .6s ease;
 max-height: 0;
}
.toggle:hover .toggle-height {
 max-height: 1000px;
}
.toggle-transform {
 padding: 5px;
 color: white;
 transition: transform .4s ease;
 transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
 transform: translateY(0);
}

<div class="toggle">
 <div class="toggle-header">
 Toggle!
 </div>
 <div class="toggle-height">
 <div class="toggle-transform">
 <p>Content!</p>
 <p>Content!</p>
 <p>Content!</p>
 <p>Content!</p>
 </div>
 </div>
</div>
<div class="toggle">
 <div class="toggle-header">
 Toggle!
 </div>
 <div class="toggle-height">
 <div class="toggle-transform">
 <p>Content!</p>
 <p>Content!</p>
 <p>Content!</p>
 <p>Content!</p>
 </div>
 </div>
</div>

jake 38.1k1 gold badge18 silver badges2 bronze badges · Accepted Answer · 2011-11-30 18:42:56Z

3719

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: #d5d5d5;
}
#menu:hover #list {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

<div id="menu">
 <a>hover me</a>
 <ul id="list">
 <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 </ul>
</div>

Share

Improve this answer

edited Oct 16, 2019 at 19:21

jlouzado's user avatar

jlouzado

5021 gold badge4 silver badges18 bronze badges

answered Nov 30, 2011 at 18:42

jake's user avatar

jake

38.1k1 gold badge18 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

vsync

vsync Over a year ago

this works great! except there is a delay when it starts, because it starts for max-height which initially is very high..hmm, i think this is somewhat annoying

2011年12月05日T16:03:52.58Z+00:00

kingjeffrey

kingjeffrey Over a year ago

+1 Great solution! The speed of the transition is calculated is calculated as the time you specify to transition to the max-height value... but since height will be less than max-height, the transition to actual height will occur faster (often significantly) than the time specified.

2012年03月03日T04:15:59.92Z+00:00

jpeltoniemi

jpeltoniemi Over a year ago

Note that this may cause ugly transition ending when you have to use values that are much bigger than the actual computed value. I noticed this while trying to make a div grow from 0 height to the content height that varies greatly due to different screen sizes(2 lines on my 2560x1440 monitor vs >10 lines on a smartphone). For this I ended up going with js.

2013年05月17日T10:22:01.527Z+00:00

Tim

Tim Over a year ago

Very ugly solution since it creates a delay in one direction but not the other.

2013年11月20日T14:57:32.017Z+00:00

Shawn Whinnery

Shawn Whinnery Over a year ago

This is a pretty lazy solution. I'm assuming OP wants to use height : auto because the expanded height of the container is somewhat unpredictable. This solution will cause a delay before the animation becomes visible. Additionally the visible duration of the animation will be unpredictable. You'll get much more predictable (and likely smoother) results by calculating the combined height of each of the containers child nodes and then easing to an exact height value.

2014年04月16日T22:06:02.58Z+00:00

|

CollectivesTM on Stack Overflow

46 Answers 46

12 Comments

9 Comments

3 Comments

3 Comments

Demo

How does it work?

5 Comments

4 Comments

11 Comments

4 Comments

1 Comment

2 Comments

Expanding/collapsing an overlay

Expanding/collapsing a sliding overlay

11 Comments

1 Comment

1 Comment

Update, 2024

Original (outdated), from 2016

2 Comments

1 Comment

Toggle an overlay

Toggle in the document flow

3 Comments

3 Comments

Comments

3 Comments

5 Comments

Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

height: calc-size(auto)

1 Comment

1 Comment

Comments

Linked

Related

`height: calc-size(auto)`