Skip to content
🔥 Black Friday Sale: Save 30% on Pro Yearly with code BF2025. Upgrade now 🔥
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 9 months ago

FAQ Accordion with vanilla css and Js

Bhavik Thakur•340
@bhavikthakur
A solution to the FAQ accordion challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

None!

What challenges did you encounter, and how did you overcome them?

Since this was my first js challenge, I struggled a lot. I thought this is the easiest js challenge per FM filter, but I don't think so, at least in my case. I wasn't able to add a smooth transition. I used display:none at first but couldn't add a transition, so I had to use the height option with the help of Google (no lie), so I managed to do it on my own. Also, I've noticed my answers expanding, but with that, my questions would push upwards, which made it look weird for some reason, so I added some margin. I still don't know if my solution is good enough. I am planning to add keyboard navigation and better height handling soon but didn't wanna get stuck so I submitted the solution.

What specific areas of your project would you like help with?

Please help me, guys.

  1. I don't want my card to shrink or grow and would prefer it to be fixed size even if I collapse my first expanded answer, which is a default as per design.
  2. I need help with Accordion's most preferred approach in the sense that I don't know what the most preferred approach when it comes to accordion
  3. I couldn't fix my card exactly in the middle as per design so I did it ugly way by adding padding to the body
  4. I need a permanent fix or solution to avoid questions shifting upwards when we expand the answers. I was able to do it here using margin but I don't know if its right way to do it.
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Bhavik Thakur's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License