Design comparison
Solution retrospective
I am not sure if there is a cleaner way to write the Javascript. Feedback would be very appreciated!
Community feedback
- @IamparvesPosted 9 months ago
There sure is. You did a good job, but you did everything manually. You added all of the FAQ content manually in the html. Then selected every single one of them separately in JavaScript and added event listener to all of them separately.
Which is not how it should be done. If you did everything manually then it could've been done using CSS only.
Also, there were only 4 FAQ item so it wasn't that hard to add them manually. But what if there was like 20 or 30 items? Or what if the data came from an external source / API. Then this won't work right?
What you can do instead is that you can add all of the FAQ items in a JavaScript array of objects and loop over them and insert them in the DOM using JavaScript. Then you can add a
event listener
to the parent of FAQ items and toggle answers based on the clicked target.I suggest you watch this video from Web Dev Simplified to understand how to handle event listeners better: Learn JavaScript Event Listeners In 18 Minutes
Hope this helps :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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