title: Automatically hide other div in Javascript
body: <pre><code>const answer = document.querySelectorAll(&quot;.answer&quot;);
  const question = document.querySelectorAll(&quot;.question&quot;);
  
  console.log(question);
  for (let i = 0; i &lt; question.length; i++) {
    question[i].addEventListener(&quot;click&quot;, function () {
      answer[i].classList.toggle(&quot;hide&quot;);
    });
  }
  </code></pre>
  <p>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?</p>