Skip to content
Submitted about 3 years ago

🧾FAQ Accordion | HTML | Pure CSS | CSS Animations

bunee•2,020
@buneeIsSlo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

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•810
    @FlorianJourdePosted about 3 years ago

    Pretty cool floating animation !

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

    1
    bunee•2,020
    @buneeIsSloPosted about 3 years ago

    @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

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