Skip to content
Submitted almost 3 years ago

FAQ Accordion using flexbox and javascript

Marit•400
@Maritxx
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

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! ^^

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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)! 😁

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