Skip to content
Submitted 10 months ago

FAQ Accordion with React

#react
Svetlozar Stoykov•60
@svetstoykov
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

Here is my solution to the FAQ accordion project. My biggest struggle here was positioning the background image. Honestly it took a lot of trial and error. Nevertheless it was a fun project. I used React to make the page responsive and also added transition animations.

Community feedback

  • Grace•31,530
    @grace-snowPosted 2 days ago

    Hi, similar to the last I left feedback on, this needs the html rewriting. Accordions like this must be coded as disclosure buttons. You can't have click listeners on divs (try using the solution with a keyboard only and you'll see it doesn't work). You can learn more about disclosures on the APG (ARIA authoring practices guide) website looking at the patterns page or I've done a write up on my website: https://fedmentor.dev/posts/disclosure-ui/.

    All the javascript needs to do in this challenge is toggle the aria-expanded value on some buttons. Everything else can be handled with the styling.

    It's really important to carefully consider what html is appropriate, it's the foundation of everything else.

    Marked as helpful
    2

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