全部のレッスンを見終わった後に、自分なりにコードを書いてみました。

そこで、今回のレッスンでは toggle を使ってますが、
add でも同じようなことができるのではないかと思って以下のコードを書いてみましたが、
うまく動きませんでした。

HTML

<h2>FQA</h2>

    <dl>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </dl>

    <dl>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </dl>

    <dl>
      <dt>質問です</dt>
      <dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
    </dl>

CSS

h2 {
  border-bottom: solid 1px;
  padding: 16px 20px;
  margin-bottom: 30px;
}



dl {
  margin: 15px;
}



dt {
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}

dt::after {
  content: '+ ';
  position: absolute;
  right: 20px;
}


dt::before {
  content: 'Q. ';
}

dd::before {
  content: 'A. ';
}

dd {
  display: none;
}

dd.appear {
  display: block;
}

JavaScript

{
  const dts = document.querySelectorAll('dt');

  dts.addEventListener('click', () => {
    dd.classList.add('appear');
  });
}

add はクラスを追加するのでできるのでは？と思ったのですが…

なので、 div を書かない場合はの JavaScript の書き方を教えてほしいです。