Design comparison
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
- @aemann2Posted over 3 years ago
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@DeKodingCodePosted over 3 years ago@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
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