Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Accordion FAQ

Yuko Horita• 645

@Sloth247

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


I have updated the solution for this challenge on 1st September 2021.

Community feedback

Vanza Setia• 27,875

@vanzasetia

Posted

👋Hi Sloth!

Thanks for leaving kind words on my solution!

I can close the panel that I opened, in my opinion there's nothing wrong with it.

Some feedback on this solution:

  • For the icon arrows, they are decorative images. You can add aria-hidden="true" and leave the alt="".
  • For padding, margin, gap, I recommend to use rem or em units instead of %. The reason for that is, you can't limit the max padding, which means it might not be looking good on wide screen.
  • Also 640px is too early to change the layout into two columns.
  • Try to do this challenge using JavaScript, since the non JavaScript version is just additional challenge.

That's it! Hopefully this is helpful!

Marked as helpful

0

Yuko Horita• 645

@Sloth247

Posted

@vanzasetia Thank you very much for your feedback! I meant closing all other panels when one panel is open, but I guess I need to use JavaScript to make this work.

I will reflect your advice and will update my solution. Thank you very much 😊

0
P
Grace• 27,350

@grace-snow

Posted

Hi this needs quite a lot more work, including making it look good on all screen sizes.

Look up how to build "inclusive collapsible sections". There are some good resources out there.

Good luck

1

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