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');
}
});
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
})
});