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...
For further actions, you may consider blocking this person and/or reporting abuse
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
Awesome, glad to hear that! Thanks for stepping by! π
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.
I totally understand! My go-to solution has always been using the
max-heightapproach... 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!
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 likeoverflow-hiddenoraccordion-body__required-inner-container(obv this is overkill π) or something that makes it clear this element is required.Then, obv update your css:
Again, just a suggestion! Great write-up overall!
βοΈ βοΈ βοΈ βοΈ βοΈ
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! π
Dude, I had this problem for years, this helped a lot. Thanks.
Glad it helped! βΊοΈ
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!
Thank you so much! This motivates me a lot π
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 π»
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?
Thank you for this! I saved this for later so I can come back to it!
Thanks to you for stepping by, I really appreciate it! π
I love this solution to a common problem! π
Thank you so much, glad you liked it! π
Awesome! I really love CSS and use it instead of JS every time when I can. Thank you!
Glad you like it! Thanks for stepping by π
Nibe
Really slick solution π
Glad you enjoyed it! π
this is great ππ
Thanks! Glad you liked it π
Love it.
Great post, thank you for this!
Glad you liked it! π
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!
Glad you liked it! π
This is an excellent solution to a perpetually annoying issue. Great writeup!
Thank you so much!
Awesome! clear and straightforward explanation
Awesome, thank you for sharing this!!
Glad you enjoyed it! Thanks for stepping by π
Thank you for sharing!!! I'm enjoying it
Glad you liked it! π
Thank you for this brilliant article! It is a very helpful information π
Glad you liked it, an thanks for stepping by! π
This is cool, thanks for sharing
You're welcome! Thanks for stepping by π
I once used this grid technique and it's perfectπ
I agree! It's super cool π
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 π
Great...
Good by jquery.slideDown() !
Ahah, totally! π
Source - youtu.be/B_n4YONte5A?si=ZA8v-SSP7B...
Nope, not at all. If you're interested, this is where I learned about this first: keithjgrant.com/posts/2023/04/tran...
Well the videoβs description contains that link
Ok, but I'm telling you this video is not where I first learned about this trick π
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...
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
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
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.
Since the accordion does not stay open it can be quite frustrating
Not very good accessibility
Instead of using
:hoverto trigger show/hide of the hidden<accordion-body>, you could instead use an<input>checkbox element and trigger CSS when it is checked!π
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!
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.
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
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!
Reminds me of: stefanjudis.com/snippets/how-to-an...
Nice solution
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
I think the goal here in this post is to not use JS, simply
CSS Only.But great suggestion for an alternative solution!
Hi, there!
I get it from phone, itβs not working (