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

Responsive FAQ accordion

Junior 40

@ejmabunda

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


My second solution on this platform built with HTML, SASS and JavaScript to toggle the questions.

I wanted to add a transition when the questions are expanding but it looks weird because the margin also needs to be animated. Did anyone also face the same problem?

I appreciate any feedback you might have. 🙌

Community feedback

Account Deleted

Hi, congrats on completing the challenge. I looked at the code, but I'm not sure which margin you want animate. But if you want the toggle to be smoother, then the element that needs animation is your 'content-accordion' , which has no margin. Dont forget to add the same transition to the icon.

Note: English is not my native language, so sorry for anything

1
Junior 40

@ejmabunda

Posted

Hi @TeixeiraCamila, you're correct, .accordion-content has no margin, but when the question has expanded the .active class gets added which adds the margin. So, I removed the margin added by the .active class and placed in accordion-content, and that worked.

Your english is good don't worry, and thanks for the taking the time to go through my code. I will try to animate the icon as well.

0

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