How can I animate my accordion menu and still keep in accesbile.
Hello
I wonder how I can animate the opening and closing of a carroussel but still keep it accessible.
Code so far : https://github.com/RoelofWobben/faq-accordion
Live url : https://roelofwobben.github.io/faq-accordion/roelof.html
GitHub
GitHub - RoelofWobben/faq-accordion
Contribute to RoelofWobben/faq-accordion development by creating an account on GitHub.
15 Replies
I just asked a similar question
No answers yet but I’ll follow along here too. I think you’ve done a much better job at making it a11y, I did not have the aria-controlledby on the child. One think I just read today though is you’re not supposed to put the hidden attribute into the markup yourself, JS should control that so if your JS fails, the content isn’t hidden forever.
https://discord.com/channels/436251713830125568/1187639085888704562
kevin has a nice video of such thing
u can animate grid-template-row
using that u can animate the slide down
min-height might work as well
Thanks, I think I then have to look for that video
@roelof what did u mean when u said, but still keep it accessible
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-...
I think you had the wrong video in your clipboard there 🙂
oh dang yaa
;-;
lemme change it
done
xD
haven't watched that Fireship vid yet, it's on my list for later.
its funny xD
Thanks, I found this one : https://www.youtube.com/watch?v=WJERnXiFFug
Kevin Powell
YouTube
Build a responsive, animated, accessible accordion that looks prett...
Accordions are a pretty common thing that we find on websites these days, but they’re often… a little bit lacking, either with awkward animations, or a complete lack of animations, and sometimes just looking pretty ugly.
I recently came across an awesome codepen by Zed Dash that looked fantastic, and I thought it would be the perfect starting p...
k
I will also look at the video that you pionted to
@glutonium @hart❤🔥 thanks
welcome
Thanks for reminding me about this, it’s exactly what I needed
YW
and have a good X-mas days