Submitted over 1 year agoA solution to the FAQ accordion challenge
FAQ Accordion using Grid only responsive Design
@techyjc
Solution retrospective
Well, this is my attempt at the FAQ Accordion design.
Got a little stuck on the best way to code it.also need to address the jumpy movement on opening the first FAQ. Other than that I think I covered it...
You be the judge!
Code
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MelvinAguilar
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- Never set
overflow: hiddenon the body element unless you're displaying a modal. It should not have overflow: hidden because this disables scrolling, which is bad for mobile users. Even I had zoom, and I wasn't able to see the bottom part of your solution 😢.
position: relativeis also unnecessary on the body element, and it's better to use a CSS reset to remove default browser styles than settingmargin: 0on the body element.
- The
<div class="attribution">should be a footer element.
- While div is excellent for positioning and styling, it's not an interactive element. It should not have a cursor pointer because it's not intended for that purpose. You should replace it with an interactive tag, like a button.
I hope you find it useful! 😄
Happy coding!
- Never set
- P@danielmrz-dev
Hello @techyjc!
Your project looks pretty good!
I have just one suggestion:
- Since the plus icon is a clickable element, it's nice to add
cursor: pointer;to it.
I hope it helps!
Other than that, great job!
- Since the plus icon is a clickable element, it's nice to add
- @techyjc
Appears to be some errors with aria attributes. I will correct them.
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