Responsive FAQ Accordion using HTML, CSS and JS

Community feedback

• 

  Parves Hossain Rabby•560

  @IamparvesPosted 10 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 helpful

  1