Skip to content
Submitted almost 3 years ago

FAQ accordion card with flexbox and js vanilla

Thais•255
@thaiscode
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The arrow animation only happens when it's clicked, I can't make it happen when the phrase is clicked. Is it because I used the <details> tag?

Any feedback about the challenge is welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • David•7,960
    @DavidMorgade

    Hello Thais, congrats on finishing the challenge! your FAQ accordion looks great and its working perfectly, good job using the <summary> html tag to do the job for you!

    I think that your arrow is behaving that way because in your Javascript you are attaching the addEventListener to your arrow image instead to the whole <details> dropdown, you should attach your event listener to your details and then change the arrows on clicking them instead of just selecting the arrows.

    Hope my feedback helps you, if you have any questions about how can this get done, don't hesitate to ask I will try to help you with a pull request if needed!

    Marked as helpful

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