How to animate summary/details tag height?
https://www.youtube.com/watch?v=B_n4YONte5A I saw this video of Kev's but can't see a simple way to apply it to details tag. Is it possible?
Kevin Powell
YouTube
The simple trick to transition from height 0 to auto with CSS
Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement!
🔗 Links
✅ Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...
5 Replies
no, can't do it with details
Nothing you can do to animate that afaik
well that's a huge bummer, unfortunately
That's really the only way to do proper and semantic FAQ-s/accordions nowadays
Actually, they shouldn't be used for accordions...
Adrian Roselli
Details / Summary Are Not [insert control here]
Once major browsers started supporting & developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening this new-to-us interaction as the solution…
wow ok... learning new stuff daily