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! 😊
This is an excellent solution to a perpetually annoying issue. Great writeup!
Thank you so much!
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! 😊
Great post, thank you for this!
Glad you liked it! 😉
Love it.
this is great 👏👏
Thanks! Glad you liked it 😁
Really slick solution 👌
Glad you enjoyed it! 😉
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.
Nibe
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 😉
I love this solution to a common problem! 🎉
Thank you so much, 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! 😁
Thank you for sharing!!! I'm enjoying it
Glad you liked it! 😁
I once used this grid technique and it's perfect👍
I agree! It's super cool 😉
Awesome! clear and straightforward explanation
Awesome, thank you for sharing this!!
Glad you enjoyed it! Thanks for stepping by 😉
Great...
Good by jquery.slideDown() !
Ahah, totally! 😁
This is cool, thanks for sharing
You're welcome! Thanks for stepping by 😁
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
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 😅
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
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.
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.
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!
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 (