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

Responsive FAQ Accordion

Bogdan Kim 780

@semperprimum

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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

@bbsmoothdev

Posted

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

@semperprimum

Posted

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

0
DEVADE/ 80

@AdeMEDIA

Posted

Nice one mate, Keep it up

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