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

FAQ accordion card - React

Sylvain 70

@longani974

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


When I started this project, I had no idea that it was impossible to grow the accordion smoothly in css between height: 0 and height: auto. This is the part where I spent a lot of time finding a solution that I hadn't anticipated.

To challenge me, a parallax effect on the shadows. For the mobile version, the effect is triggered when scrolling. And for the desktop version, the effect is triggered when the accordion expands.

Community feedback

@ArshKarpoor

Posted

This is very Nice

You are Awsome

1

Sylvain 70

@longani974

Posted

@ArshKarpoor Thank you so mush.

0

@annesophie22

Posted

Well this is what I call "going further than what is requested" ! That's awesome, that's so neat. I am a stranger to React and ignored it would be useful for this kind of projects. Did you use "high level" React or would it be something that a beginner in React could achieve without too much hair pulling ? Great work !

0

Sylvain 70

@longani974

Posted

@annesophie22 Thank you.

For a little isolated project like this, I don't thing that React is the solution in real life. But to learn that was great.

I am a beginner in React, and some parts were trickly for me. But finally I only used basic React concepts for this challenge.

0

@annesophie22

Posted

@longani974 Well, it will encourage me to try it as well the day I will learn React !

0

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