How do I get all the elements instead of just the first one?

Question

I am trying to get this accordion style faq-sheet to work. So far I can only seem to get the first element to show the hidden content. Here is my js:

var arrowIcon = document.querySelector('.arrow-icon');
var hidden = document.querySelector('.hidden');

var answer = 'answer';

arrowIcon.addEventListener('click', function() {
  if (answer === 'hidden') {
    answer = 'answer';
    hidden.setAttribute('class', 'answer');
  }
  else {
    answer = 'hidden';
    hidden.setAttribute('class', 'hidden');
  }
});

Answer 1

You need to use querySelectorAll and then iterate through each element and add click listener. Keep in mind that querySelectorAll returns a nodeList not an array. So if you want to use all the array functionality make sure you convert it into array.

Something like this should work:

var arrowIcon = Array.from(document.querySelectorAll('.arrow-icon'));

arrowIcon.forEach(el => {
    el.addEventListener("click", => (event) {
        // Your Code Here
    })
});