Skip to content
Submitted 3 months ago

Faq accordion with React.js full responsive

Alan-H-H•330
@Alan-H-H
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?

I´m pretty proud of my solution outcome in general. This time i could take the time to be attending to detail, specially on visual aspects.

What challenges did you encounter, and how did you overcome them?

The biggest challenge this afternoon and the day after was to decide the architecture of the whole solution, to give the right output.

Community feedback

  • Edwin Cheng•360
    @edwinc73Posted 3 months ago

    Congratulations on completing the challenge. Looks like you are using react however you are using it like regular javascript. You could try to use the useState hook to control whether each question is opened or not.

    The html contains buttons which is what I would also use for this solution as it is operabke by keyboard.

    In terms of accessibilty you are missing a title element in your html and some meta tags. I noticed that when the screen is small the faq is pinned to the top. I think this is because you are using a negative margin top and a bg image with variable height. At some point the img gets so short that the faq is pinned to the top. You could instead try using position: absolute

    Great attempt!

    Marked as helpful
    0

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