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
clevermissfox
clevermissfox12mo ago
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
glutonium
glutonium12mo ago
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
roelof
roelofOP12mo ago
Thanks, I think I then have to look for that video
glutonium
glutonium12mo ago
@roelof what did u mean when u said, but still keep it accessible
glutonium
glutonium12mo ago
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-...
Jochem
Jochem12mo ago
I think you had the wrong video in your clipboard there 🙂
glutonium
glutonium12mo ago
oh dang yaa ;-; lemme change it done xD
Jochem
Jochem12mo ago
haven't watched that Fireship vid yet, it's on my list for later.
glutonium
glutonium12mo ago
its funny xD
roelof
roelofOP12mo ago
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...
glutonium
glutonium12mo ago
k
roelof
roelofOP12mo ago
I will also look at the video that you pionted to @glutonium @hart❤🔥 thanks
glutonium
glutonium12mo ago
welcome
clevermissfox
clevermissfox12mo ago
Thanks for reminding me about this, it’s exactly what I needed
roelof
roelofOP12mo ago
YW and have a good X-mas days
Want results from more Discord servers?
Add your server