Skip to content
Submitted over 2 years ago

FAQ accordion card with flexbox and js vanilla

Thais•255
@thaiscode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • David•7,960
    @DavidMorgadePosted over 2 years ago

    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
    0

Please log in to post a comment

Log in with GitHub

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