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 card accordian using sass

@dralm3ida

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


Hi,

Any feedback would be greatly appreciated. Particularly, I would like to know if there is a better way of positioning the ilustration women image.

Thank you.

Community feedback

T
Grace 29,910

@grace-snow

Posted

Hi,

The preview looks good, but content is spilling out of the white container on mobile for me.

Looking at html you are very close to making this accessible! Just make your faq-item-link elements into buttons and you'd be there! Even better if you then gave them aria-expanded and aria-controls attributes

With the javascript I have a couple of suggestions

  • you don't need to select the icon and the paragraph. Instead, just toggle one class on the parent and let css handle the rest.
  • when selecting elements in js, I suggest using a specific class for that job. I usually prefix the class name like js-faq-toggle or similar so I can see exactly what the js is targeting when I open the html. It's a good habit to build.

Hope these ideas help you ☺

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