Skip to content
Submitted 10 months ago

Responsive FAQ Accordion

Bogdan Kim•780
@semperprimum
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

I would greatly appreciate any feedback that you may have!

Wanted to build something simple and stumbled upon this challenge :)

Community feedback

  • Bruce B•505
    @bbsmoothdevPosted 10 months ago

    Hey, just a few quick issues. You can't have spaces in your id values. So id="Question 1" needs to be id="Question1". Also, I see you are using the aria-controls attribute on each button to associate the button with the paragraph it toggles, which is great, but you forgot an even more important aria attribute, aria-expanded. This attribute goes on the button, not the p element. When the content is not showing then it should be aria-expanded="false". When the content is showing then it should be aria-expanded="true".

    Marked as helpful
    0
    Bogdan Kim•780
    @semperprimumPosted 10 months ago

    @bbsmoothdev, thanks so much for your feedback! Will be noted!

    0
  • DEVADE/•80
    @AdeMEDIAPosted 10 months ago

    Nice one mate, Keep it up

    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