Skip to content
Submitted about 1 month ago

FAQ accordion - CSS only, semantic HTML, and keyboard accessibility

Eli Silk•660
@elisilk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This one was a ton of fun. After looking around a bit about how to implement a CSS only accordion, I finally stumbled across the element, which was perfect for the job. Semantically appropriate, accessible, and easy to implement.

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

I am a little confused about why I'm getting some HTML validator errors by using the name attribute in the details elements. Can anyone help me figure out what I did wrong? Seems to me like I am using the name attribute in the appropriate way. But maybe I am missing something? 🤔

Community feedback

  • Yacoub AlDweik•970
    @YacoubDweikPosted about 1 month ago

    Hey Eli! I must say that I've learned something new from you today man! I couldn't imagine that there's an HTML element called details can do all this magic! Thanks and keep coding man!

    1
  • KapteynUniverse•2,150
    @KapteynUniversePosted about 1 month ago

    Nice job. I did this one without JS too. I didn't know name attribute back then, stole it :D

    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