Skip to content
Submitted over 1 year ago

FAQ accordion using CSS Flexbox and Javascript

brenda127s•20
@brenda127s
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello community! I am still learning javascript and the basics of it. I had trouble alternating between the plus and minus icons. Once I finally got it to work, you can still see the plus icon behind it. How would you typically switch between icons, making one or the other visible based on clicks?

I also had trouble expanding the paragraph element within javascript. I got it to work when the icons were clicked, then I got it to work when the questions were clicked but then it wouldn't work with the icons anymore. Is there a way to add two variables to the same forEach method? How would I be able to have two different variables perform the same function?

I appreciate any help/criticism!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey there, brenda127s! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Great job on this project! 👏

    I'd like to suggest using the <details> and <summary> elements for the accordions in this component. Currently, you are using <div>s for those elements, which aren't accessible because they aren't keyboard-focusable or recognized as interactive elements by browsers and screen readers. There are also some issues like some of the answer content getting cut off towards the bottom of the accordions on smaller screens. Using the <details> and <summary> elements will help solve these issues. If you're interested, you can learn more about them here from MDN.

    As for dealing with the icons, if you go with using the <details> and <summary> elements you can check for the open attribute on the <details> element and show/hide the icons based on the state of that attribute.

    Also, don't forget to add some alt text to the <img> elements on your page (but leave the alt text empty if those images are just for decoration and don't need to be noticed by screen readers) and to give the <img> elements unique IDs. 😉

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

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