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

Flexbooks, Animations & JS

@DeKodingCode

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


Decided to give my hand a try at using Flexbox, and since I'm rather new to JS, I did the accordion animations with JS.

Still learning about making sites more fluid and responsive.

Any tips or suggestions are welcome!

Community feedback

Adam 430

@aemann2

Posted

Hi Dominic,

One problem I noticed is that if the user opens too many accordion tabs, the text will go off the page. I solved this in my solution by writing some JS to only let one tab be open at a time.

The way the box is animated to look like it's levitating is a really nice touch -- I didn't even think to do that.

0

@DeKodingCode

Posted

@aemann2 Thanks!

I just used a simple box-shadow for the effect.

In terms of the accordion tabs, The left and right side of the actual FAQ 'card' is split into two divs, respectively, using Flexbox. For the side which has the questions, I had incorporated overflow: scroll, which would allow the user to scroll when too many accordion tabs were open.

Had a look at yours, I like the idea of only having one open at a time.

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