Submitted about 3 years ago
A mobile first FAQ accordion card with vanilla JavaScript
@heyitsgany
Design comparison
SolutionDesign
Community feedback
- @grace-snowPosted about 3 years ago
Hi Jason
I really like this solution! Nice semantic html and clearly structured JavaScript, well done
The only issues I see are
- height 100vh instead of min-height is breaking this solution on mobile. Content is cut off and there is no ability to scroll. Easy to fix though
- it’s very strange how the icon animates after the question. This creates a little glitch and makes it look broken
- animating max height instead of height on the question makes this solution less robust if it was a real world scenario. You wouldn’t want to limit the height in case longer content was added to an answer
- similar potential issues where you’ve defined width and height on the desktop grids. In those cases max width and min height might be more robust
Good luck
Marked as helpful1@heyitsganyPosted about 3 years ago@grace-snow Hi Grace,
- Really appreciate the feedback. The height of 100vh isn't the problem, for some reason I've put an overflow of hidden on the body. No idea what that's a holdover from, but if I remove it it works.
- As for the icon. I'm not entirely sure how you mean it looks broken. Do you perhaps mean how it animates at a slightly slower transition speed? That's easily fixed.
- Animating the max height seemed to be the ideal way to transition the elements within the design. You could ideally workout the maximum the text would ever be and give it that value. Transitioning height would require calculating each elements height as you can't transition height set at auto.
- This seems an easy fix, and is something I need to get into the habit of doing if I don't need an explicit width.
Thank you!
0@grace-snowPosted about 3 years ago@heyitsgany yes in a real world scenario you would have to transition height to 100% or use js to calc the items height and apply it inline. Or I guess you'd have an auto scroll inside the answers in case it was ever needed
I work on content managed sites a lot and you'll be amazed how much content gets written into these kinds of answers once a site goes live! 😂
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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