Skip to content
Submitted 4 months ago

FAQ Accordion

accessibility, pure-css
Muhamad Rukhul Kirom•380
@rukhulkirom
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

What I am Proud Of?

  1. Good accessibility

  2. Effective Functionality

  3. Clean & Well-Structured Code

What Would I Do Differently Next Time?

  • Use CSS for Plus/Minus Icon Toggle
What challenges did you encounter, and how did you overcome them?

  • Challenge: Initially, the accordion's transition felt abrupt or didn't work correctly when toggling sections.

  • Solution: Used scrollHeight to dynamically set the height of the expanded content instead of using max-height: 0;. This ensured a smooth transition when opening and closing FAQ items.

What specific areas of your project would you like help with?

  1. I’ve implemented aria-expanded and aria-hidden for screen readers, but are there any improvements I could make?

  2. Is my keyboard navigation implementation (handling Enter and Space keys) the best approach, or is there a more efficient way?

  3. Right now, I’m using max-height with scrollHeight for the animation. Is there a better way to make the expanding/collapsing effect smoother?

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Muhamad Rukhul Kirom's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord