Use javascript vanilla para adicionar / remover classe a um elemento diferente depois de clicar em outro
Eu examinei várias perguntas semelhantes, mas não consigo encontrar um exemplo específico de uma que responda no vanilla JS como adicionar e remover uma classe para um elemento diferente daquele em que você clicou. Eu sei que isso tem algo a ver com a criação de um loop e a iteração pelos elementos, mas eu me perdi no processo exato.
Eu tenho vários elementos com um nome de classe defaq-container e quando eu clicar em qualquer um deles, gostaria da aulafaq-display adicionado à etiqueta do corpo. Eu sei que tenho que configurar um loop comofor (var i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); } mas não sei exatamente onde escrevê-lo no código para fazer isso funcionar. Eu tentei várias maneiras, mas todas falham.
Meu script atual é o seguinte, onde eu simplesmente viso o primeiro elemento da matriz, mas quero poder clicar em qualquer um dosfaq-container elementos e adicione o nome da classe à primeira e única tag do corpo:
document.addEventListener("DOMContentLoaded", function() {
document.getElementsByClassName('faq-container')[0].addEventListener('click', function() {
var faqToggle = document.getElementsByTagName('body')[0];
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!");
}
});
});<div class="faq-container cf" id="faq-container">
<h3 <?=ifxless::element( 'name')?>><?=ifxless::fill($this,'name');?> </h3>
<div class="faq-content">
<div class="h_line"> </div>
<div class="faq-bullets" <?=ifxless::element( 'content')?>>
<?=ifxless::fill($this, 'content');?>
</div>
</div>
</div>