See the Pen Untitled by wataruNakai (@wataruNakai) on CodePen.
今回はjsを使って基本的なアコーディオンUIを実装してました。 jsで記述する機能としては、・トグルメソッドでクラスのつけ外し
・dt要素は複数あるのでforEach文で繰り返し処理
・トグルでクラスを付けれるのは一つの要素のみとする
3番目に記述した中身は、クリックした要素の親要素にappearクラスを付けたあとで、
いったんすべての dt 要素を調べてあげて、クリックされた dt 要素以外のappearクラスを削除する流れになります。
js記述の内容
1行目:クエリーセレクターオールでdtの要素を全て取得。
2行目:取得したdt要素（変数dts）の繰り返し処理(forEach)
3行目:引数dtの要素がクリックされたら以下の処理をします。
4行目:引数dtの親要素(div)にtoggleメソッドでappearクラスを付け外しする。
5行目:上記で取得したdiv .appear dt要素(el)を繰り返し処理(forEach)で使います。
6行目:if文のtrueの中身は初めに取得したdt要素とクリックによってクラス付与されたdt要素を真偽値で比較します。
今回はイコールでなければ7行目を実装するといった形になります。
7行目:'div.appear dt'(el)の親要素のクラス.appearを削除する。
以上となります。