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 using flexbox and javascript

Marit 400

@Maritxx

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! Here's my solution to the Accordion FAQ. I struggled quite a bit with the 'shadows' behind the image (both on mobile and on desktop). I got them to 'about right' but would love to know how someone else would've done this (possibly in a more effective way than I did). Especially the box that you can see on top of the image on the desktop caused me some problems.

Would love to get some general feedback as well! ^^

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey there, Marit! 👋

Nice job on this challenge! 👍 Your solution looks great and the accordion card works well! 👏

There's no need to add aria-hidden="true" to images that have their alt text blank in your code, since leaving alt empty will already cause screen readers to ignore those images. 😉

For the background images in this challenge, I found it easier to add the "shadow" image of the illustration as a background image on the card component itself and then use a regular img element for the main illustration. But what you've done here came out rather nicely! Here's my solution if you'd interested in seeing what I did.

By the way, for your next project, you can use the native HTML details and summary elements to easily create functional and accessible accordions. I did that in my solution, as well, and it made things a lot easier! If you'd like to learn more about those elements, check out this helpful MDN article on them.

Hope you find these tips helpful. 😊

Keep coding (and happy coding, too)! 😁

2

Marit 400

@Maritxx

Posted

@ApplePieGiraffe Hi! Thanks for the info. I wasn't aware that it wasn't needed. I will also look at your solution to see how you did it! I found that I'm often not using the 'easiest' or 'most logical' solution to something, so seeing how others did it will be very helpful. ^^

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