I’m working on a drop down FAQ where the user clicks the desire question and a hidden div containing the information is displayed. The piece of code I came up with only does that, displays or hides the clicked div. But I’m trying to do a function that one an user clicks the displayed information is hidden and the clicked one is shown. [activate one element and deactivate the rest] I do so through CSS adding/removing classes. I’m new to JS so there’s things that takes me longer. If anyone can help me out it’ll be amazing.
Here’s the JS code so far.
//Storing the buttons
const questions = document.getElementsByClassName(‘faq-list-item’)
//Storing the hidden div
const clic = document.querySelectorAll(‘q-answered’)
for (let i = 0; i < questions.length; i++) {
questions[i].addEventListener(‘click’,((e) => {
return function() {
if (clic[e].classList.contains(‘q-answered)) {
clic[e].classList.replace(‘q-answered’, ‘q-answeredno’);
} else if (clic[e].classList.contains(‘q-answeredno’)) {
clic[e].classList.replace(‘q-answeredno’, ‘q-answered’);
}
}
})(i))
}