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

Hachi 155

@hachi-ops

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


Unfortunately my accordion has at least two major flaws:

  1. it doesn't hide the previous answer once another is open
  2. it doesn't flip the arrow upside down when clicked

I would really appreciate if anyone is willing to look at my code and suggest how to do it.

Community feedback

Anna Leigh 5,135

@brasspetals

Posted

Hi, Hachi! 👋 Congrats on completing another solution! I actually prefer that each question/answer stay open until the user decides to close it, but that's just me. 😄

Some suggestions:

  • To clear up the errors in your report, simply add alt attributes to your images, even if you leave them blank. 👍
  • To make the arrow turn, I suggest applying a transform when the answer is visible, ex: transform: rotate(180deg);
  • Although this would require a bit of refactoring, using the details element might make your life a bit easier!
0
P
Patrick 14,325

@palgramming

Posted

well also when you click the question that should open the card that should be the first thing you should work on fixing right now you have to click the arrow to open the card

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