DEV Community

Cover image for 🧙‍♂️ CSS trick: transition from height 0 to auto!

🧙‍♂️ CSS trick: transition from height 0 to auto!

Francesco Vetere on November 25, 2023

If you messed around with CSS for long enough, chances are you've tried at least once to make a transition from height: 0 to auto... only to find o...
Collapse
 
gyauelvis profile image
Gyau Boahen Elvis

I was having this trouble building the FAQs section of this landing page I was working on, I had to result to the max-height property. Will try this neat trick and see

Thank you for the insight

Collapse
 
francescovetere profile image
Francesco Vetere

Awesome, glad to hear that! Thanks for stepping by! 😊

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Really cool! This is a problem that's been annoying me occasionally and I've never found a good solution without using fixed heights. I have a codepen somewhere with a much more hacky way of achieving this, but I never used that in any real projects because of how ugly it is.

Collapse
 
francescovetere profile image
Francesco Vetere

I totally understand! My go-to solution has always been using the max-height approach... and yeah, I was not so proud of my code everytime I had to build an accordion 😅
But knowing that this can be now achieved without magic numbering anything and without any JS, just got me hyped up so much!

Collapse
 
gregjacobs profile image
Greg

Great post! Thank you 🙏

Small suggestion...
When simply looking at your HTML DOM Structure for the accordion component, I was wondering why there was an empty <div> within the accordion body, only later to find out it is a necessary element.

Maybe specify a class on the empty <div> with something like overflow-hidden or accordion-body__required-inner-container (obv this is overkill 😆) or something that makes it clear this element is required.

<div class="accordion">
    <div class="accordion-title">Hover me!</div>
    <div class="accordion-body">
        <div class="accordion-body__overflow">
            <p>No longer do you need to use "max-height" to animate the transition of a hidden element.</p>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Then, obv update your css:

.accordion-body__overflow { overflow: hidden; }
Enter fullscreen mode Exit fullscreen mode

Again, just a suggestion! Great write-up overall!
⭐️ ⭐️ ⭐️ ⭐️ ⭐️

Collapse
 
francescovetere profile image
Francesco Vetere

This is a great idea! Giving that div a class makes more clear what the purpose of it really is. And using BEM for it is also a nice touch. Thanks for the tip! 😉

Collapse
 
laerciolopesll profile image
LaercioLopesLL

Dude, I had this problem for years, this helped a lot. Thanks.

Collapse
 
francescovetere profile image
Francesco Vetere

Glad it helped! ☺️

Collapse
 
aaron1490 profile image
Aaron Armstrong • Edited

Hey there Francesco, thanks for sharing.
I've just started a Front End Dev bootcamp course and I will definitely be using some of these techniques that you've suggested in the future. - Bookmarked and followed!

Collapse
 
francescovetere profile image
Francesco Vetere

Thank you so much! This motivates me a lot 😁

Collapse
 
shamemezahid profile image
Shamim Bin Zahid • Edited

there is one very niche specific problem with this what almost no one will face. If you happen to have a meatball menu in this click-or-hover-to-expand component, the menu will be cropped because of the overflow hidden property. I am yet to find a solution for this. Using html details and summary tags may be a nice way of doing it. haven’t tried tho.

great post btw 🌻

Collapse
 
francescovetere profile image
Francesco Vetere

I don't think I completely understood the scenario you're describing: could you provide an example of this, or a codepen where this situation happens?

Collapse
 
renedev profile image
Rene D

Great post, thank you for this!

Collapse
 
francescovetere profile image
Francesco Vetere

Glad you liked it! 😉

Collapse
 
magnificode profile image
Dominic Magnifico

This is an excellent solution to a perpetually annoying issue. Great writeup!

Collapse
 
francescovetere profile image
Francesco Vetere

Thank you so much!

Collapse
 
artxe2 profile image
Yeom suyun

I used margin instead of height transition to implement height transition in a multi-level menu, but I think gtr can also be used in this case.

Collapse
 
nwarwick profile image
Nicholas Warwick

Really slick solution 👌

Collapse
 
francescovetere profile image
Francesco Vetere

Glad you enjoyed it! 😉

Collapse
 
sun_kanmii profile image
Sunkanmi Fafowora

Love it.

Collapse
 
hasanelsherbiny profile image
Hasan Elsherbiny

this is great 👏👏

Collapse
 
francescovetere profile image
Francesco Vetere

Thanks! Glad you liked it 😁

Collapse
 
nyruchi profile image
Pasquale De Lucia

I love this solution to a common problem! 🎉

Collapse
 
francescovetere profile image
Francesco Vetere

Thank you so much, glad you liked it! 😊

Collapse
 
anitaolsen profile image
Anita Olsen

Thank you for this! I saved this for later so I can come back to it!

Collapse
 
francescovetere profile image
Francesco Vetere

Thanks to you for stepping by, I really appreciate it! 😊

Collapse
 
benavern profile image
Benjamin CARADEUC

What a great solution!!!! Love it! 😻😻😻
I'll drop all the stuff I did with a lot of JS and much less maintainable code, right now !
Thanks a lot!

Collapse
 
francescovetere profile image
Francesco Vetere

Glad you liked it! 😊

Collapse
 
freebian666 profile image
freebian666

Awesome! I really love CSS and use it instead of JS every time when I can. Thank you!

Collapse
 
francescovetere profile image
Francesco Vetere

Glad you like it! Thanks for stepping by 😉

Collapse
 
gourobdas0103 profile image
Gourob Das

Nibe

Collapse
 
timidev1 profile image
David Uwagbale

Awesome, I faced the same issue and had to resort to Js to fix it even though I like using css alone for stuff css can fix by itself.
Can't wait to try this out 👍

Collapse
 
gokul962819205008 profile image
Gokul

Great...

Collapse
 
sammandanu profile image
sammandanu

Awesome, thank you for sharing this!!

Collapse
 
francescovetere profile image
Francesco Vetere

Glad you enjoyed it! Thanks for stepping by 😉

Collapse
 
moalhemyari profile image
Mohammed AlHemyari • Edited

Awesome! clear and straightforward explanation

Collapse
 
xavierdev profile image
Lucille Xavier

This is cool, thanks for sharing

Collapse
 
francescovetere profile image
Francesco Vetere

You're welcome! Thanks for stepping by 😁

Collapse
 
pizarrosch profile image
pizarrosch

Thank you for this brilliant article! It is a very helpful information 🙂

Collapse
 
francescovetere profile image
Francesco Vetere

Glad you liked it, an thanks for stepping by! 😁

Collapse
 
nellysunday profile image
Sunday

Thank you for sharing!!! I'm enjoying it

Collapse
 
francescovetere profile image
Francesco Vetere

Glad you liked it! 😁

Collapse
 
bilalm profile image
Bilal

Good by jquery.slideDown() !

Collapse
 
francescovetere profile image
Francesco Vetere

Ahah, totally! 😁

Collapse
 
fazicodes profile image
fazicodes

I once used this grid technique and it's perfect👍

Collapse
 
francescovetere profile image
Francesco Vetere

I agree! It's super cool 😉

Collapse
 
iammonis profile image
Monis Khan
Collapse
 
francescovetere profile image
Francesco Vetere

Nope, not at all. If you're interested, this is where I learned about this first: keithjgrant.com/posts/2023/04/tran...

Collapse
 
im_monis profile image
Monis Khan

Well the video’s description contains that link

Thread Thread
 
francescovetere profile image
Francesco Vetere

Ok, but I'm telling you this video is not where I first learned about this trick 😅

Collapse
 
adaptive-shield-matrix profile image
Adaptive Shield Matrix

Why not use the browser native element of ?
developer.mozilla.org/en-US/docs/W...

You have to style it yourself and do not need any facy grid workarounds for that

Supported by all browsers: ~98% support - caniuse.com/details

Compared to ~90% of grid-template-rows - caniuse.com/mdn-css_properties_gri...

Collapse
 
francescovetere profile image
Francesco Vetere • Edited

First of all, you can't fully style the details element.
Second, as said in the very article you linked: "Unfortunately, at this time, there's no built-in way to animate the transition between open and closed."
These are the reasons

Collapse
 
aaantourism622 profile image
AanTourism

Transitioning from height: 0 to height: auto in CSS can be achieved using the max-height property. Set max-height to a sufficiently large value (e.g., max-height: 1000px) and use transition on max-height for a smooth height transition effect.
Best Regards,
Aantourism

Collapse
 
aaantourism622 profile image
AanTourism

Transitioning from height: 0 to height: auto in CSS can be achieved using the max-height property. Set max-height to a sufficiently large value (e.g., max-height: 1000px) and use transition on max-height for a smooth height transition effect.
Best Regards,
Aantourism

Collapse
 
adaptive-shield-matrix profile image
Adaptive Shield Matrix

Since the accordion does not stay open it can be quite frustrating
Not very good accessibility

Collapse
 
gregjacobs profile image
Greg

Instead of using :hover to trigger show/hide of the hidden <accordion-body>, you could instead use an <input> checkbox element and trigger CSS when it is checked!
😉

Collapse
 
francescovetere profile image
Francesco Vetere • Edited

Nice idea, didn't think about it! The good old checkbox trick, I used that in the past to build a CSS-only switch: youtube.com/watch?v=wylpTCjCbxI

Thanks for the tip!

Collapse
 
francescovetere profile image
Francesco Vetere

This is just an example to show how to animate from height 0 to auto... it's not meant to be an accessible component. The way you trigger this animation is irrelevant. I chose an hover instead of a click event, just to avoid writing any JS.

Collapse
 
ouludag profile image
Onur Uludag

Thanks for the article! One alternative could be using transform properties and overflow: hidden to imitate the same behaviour. It might bring performance benefits. But obviously your solution is neater. I will definitely give it a try.

Collapse
 
rokobuljan profile image
Roko C. Buljan • Edited
Collapse
 
lubbee profile image
lub-bee

What are the odds... I was having this problem last night, and I abandon for an approximate solution based on margin and percent... I will try that!

Collapse
 
bojidaryovchev profile image
bojidaryovchev

something really easy with a bit of JS is to set a CSS variable on the container to keep its scrollHeight and then animate from 0 to scrollHeight, this way u can avoid the overflow hidden part

Collapse
 
gregjacobs profile image
Greg

I think the goal here in this post is to not use JS, simply CSS Only.
But great suggestion for an alternative solution!

Collapse
 
supreechajaijumpa profile image
Supreecha Jaijumpa

Nice solution

Collapse
 
sergdan1992 profile image
Sergdan1992

Hi, there!
I get it from phone, it’s not working (