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

FAQ accordion using the mobile first concept

@randyrobson

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

What I'm most proud of is definitely the JavaScript code to show hidden texts, I spent a lot of time researching and studying trying to optimize it as much as possible. Using the "max height" of paragraphs instead of "display block" made it much cleaner. However, I had a lot of difficulty with the spacing between paragraphs, being able to align everything with that gray line in the middle was a headache.🤣

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

I would like some help with the Javascript code, I couldn't include keyboard navigation, I tried several ways but didn't get anywhere. I would also like to know a more efficient way to separate paragraphs while preserving overall alignment. I had a lot of difficulty aligning everything, with the active paragraph it was aligned, but when hiding it it was misaligned, in the end I couldn't give a good spacing between them.

Community feedback

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