Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

🧾FAQ Accordion | HTML | Pure CSS | CSS Animations

bunee• 2,060

@buneeIsSlo

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi! I went with an easy challenge this time. My goal was to create animations using CSS and not rely on anime.js like I did in my previous challenge.I'm quite happy with how it turned out.

Questions

  • Is my markup semantic enough?
  • What are your thoughts on the accordion itself?

Acknowledgement

  1. Thanks to @emiliemorassi solution, I found out about the details tag. This made my solution much more accessible and saved me a bunch of time.
  2. I learned about the aria-hidden attribute Thanks to @JulienLEUILLIER's solution.

P.S. If you have any questions for me, Please feel free to comment or message me on slack :).

Community feedback

Ctrl+FJ• 750

@FlorianJourde

Posted

Pretty cool floating animation !

You made me learn some stuff about <details> & <summary> tags !

1

bunee• 2,060

@buneeIsSlo

Posted

@FlorianJourde Thank you. I'm glad you learned something new from my solution :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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