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 Card

@tabascum

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


At this point I'm struggling with the mobile layout and the close action on other answers when one of them is clicked.

Community feedback

madosy 180

@madosy

Posted

You have to use unique id for your objects. All your items have #faq-question as id. I would suggest to move that to class.

Way I would change the other questions as inactive: add an eventlistener to all your questions. Upon click, remove the "active" class from all your faq-question divs and then add the active class to the one that triggered the event.

You need to have the arrow point the other way when you open a question. You could probably do this by selecting .active > img and transform y.

Marked as helpful

0

@tabascum

Posted

Fixed the issues I was facing thanks to your feedback.

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