Submitted over 3 years ago

HTML, CSS AND JAVASCRIPT ONLY

Bianca Procopio• 150

@biancahpp

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm satisfied with how it turned out but not satisfied with the orange box. I had to put it to position: absolute in order to make it work. I would really appreciate some suggestions on how to improve that (and everything else too).

I'm still working on the mobile version so disregard that.

Community feedback

Antoine• 220

@Antoine-Flo

Posted over 3 years ago

Hi Bianca ! 👋 Yeah this box is tricky, it took me a while to figure it out as well.

My suggestion :

Right now each time we open a question it stays open, even if we open a new one. Eventually if you open all the questions it extend out of the card. Try to find a way to close the previous question each time a new one is opened (I have the same issue in my design 😅).

Great job 👍 and good luck !

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hey, Bianca Procopio! 👋

Good effort on this challenge! Your accordion card works pretty well! 🙌

I suggest,

Decreasing the width of the accordion card just a bit. It's quite large at the moment.
The floating cube can be tricky to place! I suggest wrapping the accordion and cube SVG in a div and then using absolute positioning to place the cube relative to the wrapper div so that it remains it its place and doesn't get cut off if you set overflow-x to hidden for the accordion card itself. 😉
As you mentioned, the next step would be to make this solution responsive. Looking forward to that!

Keep coding (and happy coding, too)! 😁

Please log in to post a comment

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