アコーディオンをクリックした時に、ほかのアコーディオンを閉じる

Question

アコーディオンをクリックした時に、ほかのアコーディオンを閉じるようにしたいのですが、うまくいきません。
「クリックした要素以外のほかの要素に対して命令を実行したいとき」はどうすればよいのでしょうか？
jqueryではなく、javascriptで実装をおこないたいです。

  <dl>
    <dt class="question">質問</dt>
    <dd class="answer">答え</dd>
  </dl>
  <dl>
    <dt class="question">質問</dt>
    <dd class="answer">答え</dd>
  </dl>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    dl {
      padding: 0;
      margin: 0;
      border-bottom: 1px solid #ff0;
    }

    dt {
      background: #000;
      color: #ffffff;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    dd {
      background: rgb(9, 100, 100);
      color: #ffffff;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-left: 0;
      display: none;
      transition: all 0.3s ease;
    }

    dd.active {
      display: block;
      transition: all 0.3s ease;

    }
  </style>
  <script>

    var questions = document.getElementsByClassName("question");
    var answers = document.getElementsByClassName("answer");
    for (let i = 0; i < questions.length; i++) {
      questions[i].addEventListener("click",function () {

        //ためしたこと　　questions[i].nextElementSibling.classList.remove("active");
        this.nextElementSibling.classList.toggle("active");

      });
    }
  </script>

Comments

[yambejp]

すでに開いているものをクリックしたら閉じるかどうかで
書き方がちがってきます

Answer 1

var questions = document.getElementsByClassName("question");
var answers = document.getElementsByClassName("answer");

[...questions].forEach((item, index) => {
  item.addEventListener('click', () => {
    [...answers].forEach((item2, index2) => {
      if(item2.className.indexOf('active') === -1 && index === index2) {
        item2.classList.add('active')
      } else {
        item2.classList.remove('active')
      }
    })
  })
})

で行うことができると思います。

こちらがcodepenになります。
https://codepen.io/miwashutaro0611/pen/PoqqXQm

Answer 2

ざっくりこんな感じで
（セキュリティ制限で回答欄に長文かけません、あしからず）

Comments

[yambejp]

window.addEventListener('DOMContentLoaded', ()=>{
const ans=document.querySelectorAll('.answer');
ans.forEach(x=>{
x.style.display="none";
});
document.querySelectorAll('.question').forEach(x=>{
x.addEventListener('click',()=>{
var n=x.nextElementSibling;
ans.forEach(y=>{
y.style.display=y==n?"":"none";
});
});
});
});