FAQ accordion - HTML, CSS, & Vanilla JavaScript

Solution retrospective
Having completed the original FAQ challenge it felt only right to complete the updated version!
I tried to make this component as accessible as possible by:
- using semantic html and the most appropriate interactive elements
- styling the accordion with focus states to improve the experience for those who navigate the accordion using a keyboard
- utilising
aria-expanded
,aria-hidden
,aria-controls
attributes
Any accessibility specific feedback would be very welcome.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @noelhoppe
Hi, some suggestions:
- Remove
display: grid
properties frombody, main and footer
and use
display: flex; flex-direction: column; justify-content: center; align-items: center;
and remove
margin
properties frommain
to center your FAQ container.Nice js!
- Remove
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