Skip to content
Submitted almost 2 years ago

FAQ accordion with animated transitions

Brett•60
@b-capra
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

My biggest challenge in building this project was handling how to close active accordion components whenever another is opened, as having multiple expanded will cause them to overflow the card. I'm happy with the solution I've implemented, though as I've been learning React, I think using 'useState' could have accomplished this a bit more elegantly in terms of the order of how components are rendered.

Community feedback

  • DJ Drakos•150
    @dj-drakosPosted almost 2 years ago

    Hey Brett, this looks amazing! Pixel perfect.

    Your hunch to use React's useState hook is a good one. The collapsible panels are a pretty common React Component pattern called Accordions. They can be highly customizable, and have accessibility, server side rendering, and SEO considerations built in "under the hood." Check out Material UI and Radix to get a sense of what you can do with them.

    Marked as helpful
    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