const answer = document.querySelectorAll(".answer");
const question = document.querySelectorAll(".question");
console.log(question);
for (let i = 0; i < question.length; i++) {
question[i].addEventListener("click", function () {
answer[i].classList.toggle("hide");
});
}
I have a FAQ with questions and answers. The answers are hidden until the question is clicked. How can I make it that when i have a answers showing, it automatically hides when i Click on a other question so only one answer can be showing?
Loop through all the answers. If it's the answer to the current question, toggle it, otherwise hide it.
for (let i = 0; i < question.length; i++) {
question[i].addEventListener("click", function () {
for (let j = 0; j < answer.length; j++) {
if (j == i) {
answer[j].classList.toggle("hide");
} else {
answer[j].classList.add("hide");
}
}
});
}