The simple trick to transition from height 0 to auto with CSS

For some reason I can't get this to work for links. The links in my child element are still clickable and if they have a border property, that border is visible.

the transition didnt work

thanks kevin really helped me alot

Can one do this in the context of width? i.e transitioning width. Say cards stack on top of each other and you need it to show its actual width when clicked on.

on chrome right now the container and the contents do not expand at the same time, use a few lines for content, set a different background for the contents and increase the transition duration

Man i love how this guy seems so happy when exploring new things.

Wow.... "We have the technology" finally. One of the longest CSS mysteries has been solved. Bravo.

Kevin, thank you! You are the best css advocate in world wide web) Watch your channel with pleasure!)

I would want to give you 1000 thumbs up for this! Awesome trick!!

that is cool, thank you!) And what is if we need to start for example with 4rem and expand to 100%?

But I thought we should never teach people to animate anything other than opacity and transform?

What if i have <ul> i code?

JESUS!
SICK SOLUTION!

I was so happy to see this when you first published it and I just used it again today. As a matter of fact, I made it a collection of helper classes that I can apply to anything and I plan to replace all of my collapsible blocks with this.

Can I build this using details and summary tag instant of using div? I have created div.Parent (flex, col) > details > summary + p and I am using before content "\Unicode" with position, I just wanted to know it's not a right approach to build expand drop-menu?

And if you have any margins or padding, you just lose.

Thank you so much. I needed that and now my accordion menu works perfectly.

Simply amazing

This is crazy! I've been struggling today with exact this requirement. Ending up with transitioning the min-height from 0 to e.g. 400px and setting the height from 0 to auto. I've also added the scaleY() transform, which actually looks very awesome. But from my point of view, this is a much cleaner solution than setting the min-height to a random value. Thanks for sharing this cool trick.

Thank you very much for this. I'd rather have a "useless" div than unnecessary JavaScript. You just saved me a good bit of ugly JavaScript! 🙂

This is the most usefull video of all times, thank you!

You are a brilliant man, thank you so much.

Amazing, thanks a lot!

how can i do in my case? i want a paragraph to expand or collapse the content when i click on see more/see less button . i find difficult to apply animation for this

Thanks, saved my day.

Thank you for this video, how can it work on mobile? It is a great solution... but for mouse only? I tried a lot cursor-set but without success (surely I'm doing something wrong).

OMG. How have I never thought of this before??? So much time wasted

This is great, but actually I don't understand - why do you need inner div with overflow: hidden? Why it won't work without it?

awesome.

Awesome! Thanks, buddy.

Thanks Kevin! Been looking for something like this for a long time!

Wow

Great stuff… but… I’m building in Svelte and though the example works perfectly as is, I modified it to use a css custom prop and added a button to the page to toggle a —grid-template-rows prop between 0fr and 1fr. even though the hover code simply sets the prop same as the button as soon as I use the button it stops transitioning smoothly, like there was no transition. It’s really odd… first the hover works fine then I click the button and after that both hover and click no longer transition smoothly. Even if I set the transition time in the hover css it’s still stops working after clicking the button…

The passion everyone can see with you're doing the videos with is priceless, that makes the videos even more valuable!

This is so SO HELPFUL! My collapsible components are now perfect! Had to use some javascript to change overflow to visible once the transition is complete, because I'm using dropdown inside, but the overall result is top notch! Thank you!

Can anyone tell me if the content in the "hidden" grid element (0fr tall) remains visible to screen readers? If so, this potentially solves a further accessibility problem... I think?!
Either way, is having an <a> tag handle the open/close state directly before the "hidden" element enough to make it accessible? 🤔

Really useful! Thanks! 🙂

Been scratching my head as I tried to do it with javascript. Gladly the Algorithm showed this video. Thanks Kevin!

This should be the official technique :D. Now you only have to find a solution for display transitions and you name will be immortalized in css history.

This is absolutely amazing! I was struggling with this issue for a while. This solution is amazingly creative and simple. Thank you <3

Would it be possible to also make the content "slide out" from top to bottom, without using any fixed values? So that it doesn't look like it was already there, but hiding underneath the panel-title.

Lifesaver.

random question , are aria tags required if the html is
already semantic?

Could there be any performance issues related to using this approach for an accordion?

life saver :D

Thank you, it's great, but the fact we have to depend on workarounds like this in 2023 for auto-height transition is just shameful.

ما شاء الله
فعلاً ممتاز كود بسيط حل مشكلة كبيرة

YES