This is gold. I spent a while building an accordion in react a couple of weeks ago and had to resort to refs to calculate the height dynamically. Thanks Kevin!
@@mandokir when transitioning from 0 to 1fr you will get fractional values. The grid system will create a second row to fill up the remaining space to get back to 1fr. So with grid-template-rows: .3fr; you will get a second row that fills the remaining .7fr. It's still weird how the div reacts to the size change because the overall height will shrink to the fraction while it's also divided into the two rows, but... it works
Give my secret sauce transition from 0 to auto a try (I haven't seen this trick anywhere): tab.style.height = 'auto'; const height = tab.offsetHeight; tab.style.height = 0; tab.style.height = height + 'px'; And of course a css transition on tab. Don't ask me why but as far as I can tell it does the job perfectly.
@@MrW0rDs You're setting its height to be auto, recording the height it takes up in pixels, then setting its height to 0px, and finally setting its height to the recorded height. Transitions can occur between two pixel values but not auto because sometimes auto is calculated on a subsequent layout refresh. But being that that is the case sometimes your method will fail and capture a height of 0 and your element wont transition at all, or worse if the element has padding the padding will be included in the height you capture and make the element larger than it should, and also your element becomes unresponsive because it has a hard coded pixel value which is very bad for complex UI's and not what auto is supposed to do at all. With the method described in the video none of that is the case, it is a perfect solution. Also if you don't understand how something as simple as that works yet naively use it and suggest others do too, you should take the time to learn the fundamentals and actually understand the code you are writing or you'll make the mistake of using bad code that causes rippling issues through your work you cant even begin to diagnose without the understanding of what its doing.
@@dabbopabblo Thanks for your input! I'm not sure how offsetHeight can ever return a height of 0 since the height is set to 'auto' beforehand, can you elaborate? I made it a simple example but you can see how the transition is suppose to happen from 0 to XXpx, try on a codepen. If responsiveness is a problem you can switch back to auto once the transition is completed, and vice-versa when the tab is toggled. The tab content wrapper must not have a padding, this is not a deal breaker whatsoever. Been using this for 3+ years and haven't seen it fail a single time on any browser, nor has this been reported to me. What I would like to know is why the browser doesn't repaint before the transition happen (probably because 0 => auto => 0 happens so fast, but there must be a technical explanation)
@@MrW0rDs This is how I do it, it's extremely simple. const contentContainer = < selector here >; contentContainer.style.maxHeight = isOpen ? `${contentContainer.offsetHeight}px` : '0';
Just today I got assigned a task to implement an FAQ where you see the question and, upon clicking on it, the answer gets revealed, with a nice expanding animation. Lucky me, I watched your video before implementing it! Thank you, Kevin!
i'm a front end developer and a css geek for well over 3 years of everyday working. But this solution is fucking genius. how could i not think of this??
It's amazing just how happy this made me -- I'm just about done with a project where I had wanted to have this effect on the menu but had given up trying to find a non-horrible solution. Two minutes' work and it's done, looks perfect. I know that it's likely no-one but me (not even the client) will even notice the difference, but just the knowledge that it's there gives me untold satisfaction. Thanks Kevin!
This is great, now I don't need to use extra unnecessary javascript to animate these transitions anymore, thanks to people like you that make this so much simpler
You wouldn't have needed to use JS to perform the animation/transition though. The minimum implementation before this was to find the height value and set it, but to use transition: height ...;
My deep appreciate to you for providing us with such great CSS tutorials. I am on a journey to improve and evolve my CSS skills and your tutorials have been a life changing help to progress faster and efficiently.
Brother this is brilliant! I've spent so much time trying to build a Sidebar with animated width while collapsing...I tried animating font-size to 0 and it worked, but not quite as I wanted, and this solution is exactly what I needed!!!!!!!! Thank you so much!
You're a great teacher! I really like watching your videos. I have learned a lot from the moment I started following your channel, a big hug from Argentina! 🤗
Thanks! Finally a viable solution. I encountered the problem with animating to height auto several times and I just couldn't find any good solution apart from a hacky javascript way. Someone should write this into stack overflow answers for this problem as to this day, there is no viable solution there.
Totally forgot about this video and came across it again just now since i was on the lookout for exactly this, since i need it for a project. Amazing as always Kevin!
Kevin... I was struggling with a clanky animation I have on my project due to layout shifts... this trick has saved the day, there was no better become aware of it than now
I was literally stuck trying to solve the faq accordion challenge by Frontend Mentor with CSS only. It felt almost impossible til this vid notification popped up in front of me! Thanks man, you came just in the perfect time!
Thats exactly what i wanted. I was struggling with the height auto issue in React, because auto won't trigger any css animation, making everything so awkward. Now you saved my life.
I thought I was a bit stupid when I tried to do something like that and just gave up by setting a fixed hight. So I’m happy that I have the solution now and that this isn’t totally trivial
OMG! This is the solution i searching for months. Currently i using the max-height trick or i calc the exact height via js. But this is so simple. I Love it!! Thank you Kevin!
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.
This is so amazing. Spend many hours to calculate the height of my accordion items dynamically with js after searching for a good css solution. Now after a few lines the magic is done. So great. Thanks a lot!
I have came back to say a big thank you. I watched this video the very day it was uploaded and this is the 7th day. I'm so excited for this hack, it's actually an eye opener. I stopped struggling with drop-down after watching this... I'm currently working on a project and this hack really helped me. I implemented this trick on my project and it works just very cool, no stress 😊. Thanks allot for such a helpful and quality content. Your smiles and expression as whole while teaching gives confidence 💚
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!
I've spent 4 HOURS non stop last week trying to make that effect work in a Vue project that I'm building, trying all tricks and semi-complex javascript to calculate and give every element their height at any browser window change and everything you know. Then, you came up teasing this in your newsletter and got blown away. A bit too late 🤣 it was literally the next day. But got excited by it and decided to search more about it on Google, and implemented it in just 10 minutes. From those 10 minutes, 7 were invested just cleaning the old mess 😅
I've had to make accordions a handful of times in the past year alone and always stuggled with transitions. This is gonna make everything so much simpler!
Here's an idea: just don't do the animation. This method still isn't good cause it is terrible for performance. It needs to do a complete repaint of the content on each frame. Instead, just have it fold out instantly like the user expects.
You helped me out a lot, since I had to build accordions at work today. Others have already built accordions in other projects but I really didn't like the implementation since it involved JS and a fixed height. This solution is so smooth, thanks!
It's pretty good. I can see the content in the inner div collapse just a bit before the outer. But yeah, that'd do the job for most circumstances. Great work :D
This is sick! I was having a problem where the font sizes changes with breakpoints throwing away the height i calculated initially, this fixes and I don't have to worry about setting hard height values
I just watched this video 2 days ago. And today, lo and behold... I needed to do exactly this. Fantastic timing! It works like a charm and it definitely would not have occurred to me that this can be done, were it not for this great video! Thank-you!!
This is gold. I spent a while building an accordion in react a couple of weeks ago and had to resort to refs to calculate the height dynamically. Thanks Kevin!
Same! That's just amazing!
Tears in my eyes with glorious smile. It's so relatable
Same 😂
@@demetrx7972 +1
Same😅😅
Make sure to add "grid-row: 1 / span 2;" on the child element. Otherwise the child will animate at a diffrent speed than the parent.
Thank you man, I saw that behavior and I was about to ask about it, this is 10 times better.
This is a critical detail, should be even pinned.
How does this even work? There should be nothing to span since there is only one row...
@@mandokir when transitioning from 0 to 1fr you will get fractional values. The grid system will create a second row to fill up the remaining space to get back to 1fr. So with grid-template-rows: .3fr; you will get a second row that fills the remaining .7fr. It's still weird how the div reacts to the size change because the overall height will shrink to the fraction while it's also divided into the two rows, but... it works
Bless your heart Oxuhs, savior of the day
You have literally fulfilled your tagline goal with me. I may not be great at css yet but I’ve definitely fallen in love with css and front end work.
This is absolutely brilliant!
Having to "kind of" do it with max-height, etc. is always not quite what you want.
Give my secret sauce transition from 0 to auto a try (I haven't seen this trick anywhere):
tab.style.height = 'auto';
const height = tab.offsetHeight;
tab.style.height = 0;
tab.style.height = height + 'px';
And of course a css transition on tab. Don't ask me why but as far as I can tell it does the job perfectly.
@@MrW0rDs You're setting its height to be auto, recording the height it takes up in pixels, then setting its height to 0px, and finally setting its height to the recorded height. Transitions can occur between two pixel values but not auto because sometimes auto is calculated on a subsequent layout refresh. But being that that is the case sometimes your method will fail and capture a height of 0 and your element wont transition at all, or worse if the element has padding the padding will be included in the height you capture and make the element larger than it should, and also your element becomes unresponsive because it has a hard coded pixel value which is very bad for complex UI's and not what auto is supposed to do at all. With the method described in the video none of that is the case, it is a perfect solution. Also if you don't understand how something as simple as that works yet naively use it and suggest others do too, you should take the time to learn the fundamentals and actually understand the code you are writing or you'll make the mistake of using bad code that causes rippling issues through your work you cant even begin to diagnose without the understanding of what its doing.
@@dabbopabblo Thanks for your input! I'm not sure how offsetHeight can ever return a height of 0 since the height is set to 'auto' beforehand, can you elaborate? I made it a simple example but you can see how the transition is suppose to happen from 0 to XXpx, try on a codepen. If responsiveness is a problem you can switch back to auto once the transition is completed, and vice-versa when the tab is toggled. The tab content wrapper must not have a padding, this is not a deal breaker whatsoever. Been using this for 3+ years and haven't seen it fail a single time on any browser, nor has this been reported to me. What I would like to know is why the browser doesn't repaint before the transition happen (probably because 0 => auto => 0 happens so fast, but there must be a technical explanation)
@@MrW0rDs This is how I do it, it's extremely simple.
const contentContainer = < selector here >;
contentContainer.style.maxHeight = isOpen ? `${contentContainer.offsetHeight}px` : '0';
Just today I got assigned a task to implement an FAQ where you see the question and, upon clicking on it, the answer gets revealed, with a nice expanding animation. Lucky me, I watched your video before implementing it!
Thank you, Kevin!
Hey Kevin, thanks for the shout-out! I’m glad you’re as excited about this as I am 😄
Right?!?
i'm a front end developer and a css geek for well over 3 years of everyday working. But this solution is fucking genius. how could i not think of this??
It's amazing just how happy this made me -- I'm just about done with a project where I had wanted to have this effect on the menu but had given up trying to find a non-horrible solution. Two minutes' work and it's done, looks perfect.
I know that it's likely no-one but me (not even the client) will even notice the difference, but just the knowledge that it's there gives me untold satisfaction.
Thanks Kevin!
This is great, now I don't need to use extra unnecessary javascript to animate these transitions anymore, thanks to people like you that make this so much simpler
You wouldn't have needed to use JS to perform the animation/transition though. The minimum implementation before this was to find the height value and set it, but to use transition: height ...;
My deep appreciate to you for providing us with such great CSS tutorials. I am on a journey to improve and evolve my CSS skills and your tutorials have been a life changing help to progress faster and efficiently.
🎉 Wow, it took 10 years to come up with a css only solution. I remember using the max-height hack for accordions in 2013… this is amazing.
this is so cool! why didn't I hear about this sooner? It was a pain for every website I built so far, but not anymore! thanks :)
Man ! you saved the day!
I remember watching this video as it was released, and today I came back to watch it again because I had the same use case.
Wow - I love this. It saves me lots of code to build a more / less toggle and it's the most straight-forward solution I've seen so far.
I had this problem today at work and I couldn't get it to work properly. Checking youtube, this video comes up and fixes my problem! Thanks alot!
Brother this is brilliant! I've spent so much time trying to build a Sidebar with animated width while collapsing...I tried animating font-size to 0 and it worked, but not quite as I wanted, and this solution is exactly what I needed!!!!!!!! Thank you so much!
You're a great teacher! I really like watching your videos. I have learned a lot from the moment I started following your channel, a big hug from Argentina! 🤗
This clip was very helpful! Having a dynamic height for a div with that smooth transition is exactly what I was looking for my REACT custom component.
Thanks! Finally a viable solution.
I encountered the problem with animating to height auto several times and I just couldn't find any good solution apart from a hacky javascript way. Someone should write this into stack overflow answers for this problem as to this day, there is no viable solution there.
Been struggling with this for years, thanks for sharing such an easy solution!
Thank you so much for sharing this! Coffee is on me today ☕
Thank you so much!
Have you heard about walletconnect
What an awesome little niblet of knowledge. Thank you, Chris, Keith, and, of course, Kevin! Stay awesome.
Thank you so much. I needed that and now my accordion menu works perfectly.
I figured this out once, and forgot what I did. Thank you so much for reminding me!!!! You are awesome. This is awesome :)
I have searched for this effect for so long but always ended up with some compromised version. It works like charm! Thanks you for sharing.
Been coming back here every time I need to do an accordion. Thanks a bunch man
this is so dope, i just needed it in a project and was referred to this vid by some guy in a stackoverflow question
genuinely thank you!!!
damn i was trying to figure out effective way to create this animation for last 2 weeks and you just made it so easy for me. Thanks Kevin
Totally forgot about this video and came across it again just now since i was on the lookout for exactly this, since i need it for a project. Amazing as always Kevin!
i just got this problem last night. and now it sloved. thank you and thank google that let me found you.
WOW! This is awesome! I'll use this in a couple projects I've been working on!
Been scratching my head as I tried to do it with javascript. Gladly the Algorithm showed this video. Thanks Kevin!
I’m glad to see you excited over stuff like this, just like a kid in a candy store
Kevin... I was struggling with a clanky animation I have on my project due to layout shifts... this trick has saved the day, there was no better become aware of it than now
The passion everyone can see with you're doing the videos with is priceless, that makes the videos even more valuable!
This is awesome!
I was just searching for this exact problem and couldn't find a good solution.
This is awesome!! I can finally stop using JS to define innerHeight at div's style!!! Thanks so so much!
Finally it has been done. Congrats on this acheivement!🏆and thanks for sharing.
I was literally stuck trying to solve the faq accordion challenge by Frontend Mentor with CSS only. It felt almost impossible til this vid notification popped up in front of me!
Thanks man, you came just in the perfect time!
Broe I had be struggling for so long with this that I endedup using JS everything time I need an accordion.This is very cool.
Ahhh man, finally a simple straight forward way to do collapse divs!!!!
Thank you! You are the best! I've been looking for sth like this for about 7 years!🎉🎉🎉
Bruh, I can't express my joy enough! I will 💩my pants from happiness! Thank you for this precious video, Kevin!!!!!
Amaizing find, my new vue accordion is ready to rock 💪. Thanks!
Man I love the way you are so so happy about it. Thanks for the video.😊
Thank you so much, this is golden! Helped me hugely when building a React accordion.
Thats exactly what i wanted. I was struggling with the height auto issue in React, because auto won't trigger any css animation, making everything so awkward. Now you saved my life.
I thought I was a bit stupid when I tried to do something like that and just gave up by setting a fixed hight. So I’m happy that I have the solution now and that this isn’t totally trivial
This is super useful !! I'll use this on my job, thank you Kevin
Tech job must be great
Hook a brother up 😂
Thank you for sharing this brilliant trick, no more js no more headaches
OMG! This is the solution i searching for months. Currently i using the max-height trick or i calc the exact height via js. But this is so simple. I Love it!! Thank you Kevin!
Wow! I was trying to do this with the width of a sidebar just a couple days ago and gave up. Now I know how to do it! Thanks!
Thanks Kevin! Been looking for something like this for a long time!
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.
Kevin you are my favorite mentor. Stay blessed 💜
This is so amazing. Spend many hours to calculate the height of my accordion items dynamically with js after searching for a good css solution. Now after a few lines the magic is done. So great. Thanks a lot!
those simple tricks make life easier thanx for sharing this with us
This is amazing!!
Ive been looking for something like this for a while and omg having such a simple native CSS solution is amazing
Where was this half a year ago when I needed it for my job!? Thank you for great educational tips and tricks as usual!
Man i love how this guy seems so happy when exploring new things.
This is awesome, thank you for re-re-sharing!
Wow, really great that this is now possible, thanks for sharing!
This is so cool. And it works! Thank you so much for sharing!
This is a massive game changer. Thank you!
I have came back to say a big thank you. I watched this video the very day it was uploaded and this is the 7th day. I'm so excited for this hack, it's actually an eye opener. I stopped struggling with drop-down after watching this... I'm currently working on a project and this hack really helped me. I implemented this trick on my project and it works just very cool, no stress 😊. Thanks allot for such a helpful and quality content. Your smiles and expression as whole while teaching gives confidence 💚
Feeling baffled I never realised this lol. I can't believe how beautiful it is. You just need some aria attributes. Great video man, very grateful 🙂
This kinda stuff gets me up in the morning. Awesome Kevin, thanks for sharing! Accordion-ception incoming.
Transitioning heights is finally solved, the final boss is down, credits are playing ... thank you, Kevin and Keith!
It is super useful because I got it when I really need it. I'm gonna it to my client’s project now. Cheers!
I was losing my mind trying to create a collapsible div... You saved me.
This comes at a perfect time, thank you! I will be faced with this problem soon and would have wasted much time for a more or less reasonable solution
Big thanks to Keith and you, Kevin))🙂
Short and so sweet… thank you Kevin!
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!
Brilliant, I used to just use "scale" for this. It looked fine but I like this better
FINALLYYYYY this has been cracked.
No more janky height computations for fluid animations.
Absolute *game changer!!!* Great video Kevin!
this is a gamechanger.Brilliant. Thanks a lot!
This was really helpful , I have used this trick in my projects and it's really convenient
Bro you save my life ❤
Thanks for the nice trick!. For the Accordion I would still use a better default approach which is the "details" HTML-Tag. :)
I've spent 4 HOURS non stop last week trying to make that effect work in a Vue project that I'm building, trying all tricks and semi-complex javascript to calculate and give every element their height at any browser window change and everything you know.
Then, you came up teasing this in your newsletter and got blown away. A bit too late 🤣 it was literally the next day. But got excited by it and decided to search more about it on Google, and implemented it in just 10 minutes. From those 10 minutes, 7 were invested just cleaning the old mess 😅
I've had to make accordions a handful of times in the past year alone and always stuggled with transitions. This is gonna make everything so much simpler!
Here's an idea: just don't do the animation. This method still isn't good cause it is terrible for performance. It needs to do a complete repaint of the content on each frame. Instead, just have it fold out instantly like the user expects.
@@spell105 Thanks for the amazing idea, I can't believe I didn't think of that!
@@mebamme you're welcome. people who rely on usability tools will also thank you.
@@spell105 when you build artistic website with lots of animations you just have to...
Genius! Thank you for sharing, fantastic solution! :)
Kevin, your channel has been _extremely_ helpful to me. This technique is solid gold. Thank you!
Kevin, thank you! You are the best css advocate in world wide web) Watch your channel with pleasure!)
You helped me out a lot, since I had to build accordions at work today. Others have already built accordions in other projects but I really didn't like the implementation since it involved JS and a fixed height. This solution is so smooth, thanks!
I would want to give you 1000 thumbs up for this! Awesome trick!!
Kevin Powell 🤞
His face of satisfaction worth it. God knows how much we've wanted that! 🤜🏼🤛🏼
This is absolutely amazing! I was struggling with this issue for a while. This solution is amazingly creative and simple. Thank you
It's pretty good. I can see the content in the inner div collapse just a bit before the outer. But yeah, that'd do the job for most circumstances. Great work :D
This is sick! I was having a problem where the font sizes changes with breakpoints throwing away the height i calculated initially, this fixes and I don't have to worry about setting hard height values
You bring joy to the world
keep this man alive at all costs !
Great discovery! Thanks Kevin.
You can also animate "transform", so things like switching between "scaleY(0)" to "scaleY(1)" can work nicely in some situations.
YESSSSSSSS this is amazing Kevin!
I just watched this video 2 days ago. And today, lo and behold... I needed to do exactly this. Fantastic timing! It works like a charm and it definitely would not have occurred to me that this can be done, were it not for this great video! Thank-you!!