Use vanilla javascript to add / remove class to a different element after clicking on another one
document.addEventListener("DOMContentLoaded", function() {
var faqContainers = document.getElementsByClassName('faq-container');
var faqToggle = document.getElementsByTagName('body')[0];
for (var i = 0; i < faqContainers.length; i++) {
faqContainers[i].addEventListener('click', function() {
if (faqToggle.classList.contains('faq-display')) {
faqToggle.classList.remove('faq-display');
// alert("remove faq display!");
} else {
faqToggle.classList.add('faq-display');
// alert("add faq display!");
}
});
}
});
You need to loop:
[...document.querySelectorAll('.faq-container')]
.forEach(faq => faq.addEventListener('click', () =>
document.querySelector('body').classList.toggle('faq-display')))
NOTE: if you have MANY of these divs, you are better off having one event handler for a parent and test what was clicked.
document.getElementById('faqContainerParent')
.addEventListener('click', e => {
const tgt = e.target;
if (tgt.classList.contains("faq-container") || tgt.closest("div.faq-container")) { // is it the faq-container or one of the decendants
document.querySelector('body').classList.toggle('faq-display')
}
});