JS アコーディオンUI　一つの項目を開くと、他は閉じるように実装したい

前提

JSにて、アコーディオンUIのコード練習をしております。
if文の部分が上手く実装できません。

実現したいこと

ひとつの項目を開くと、他の項目が閉じられるように実装したいです。

発生している問題・エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <title>FAQ</title>
6    <link rel="stylesheet" href="css/styles.css" />
7  </head>
8  <body>
9    <h1>FAQ</h1>
10    <dl>
11      <div>
12        <dt class="dt">質問です</dt>
13        <dd class="dd">回答です。</dd>
14      </div>
15      <div>
16        <dt class="dt">質問です</dt>
17        <dd class="dd">回答です。</dd>
18      </div>
19      <div>
20        <dt class="dt">質問です</dt>
21        <dd class="dd">回答です。</dd>
22      </div>
23    </dl>
24    <script src="js/main.js"></script>
25  </body>
26</html>
27

css
1h1 {
2	margin-bottom: 16px;
3	padding: 8px 16px;
4	border-bottom: 1px solid;
5	font-size: 18px;
6}
7
8dl {
9	margin: 0;
10}
11
12dl>div {
13	margin-bottom: 8px;
14}
15
16dt {
17/* ↑クリック連打してもテキストが選択されない */
18	position: relative;
19	padding: 8px;
20	cursor: pointer;
21	user-select: none;
22}
23
24dt::before {
25	content: "Q. ";
26}
27
28dt::after {
29	position: absolute;
30	top: 8px;
31	right: 16px;
32	content: "+";
33	transition: transform 0.8s;
34}
35
36dd {
37	display: none;
38	margin: 0;
39	padding: 8px;
40}
41
42dd::before {
43	content: "A. ";
44}
45
46dd.show {
47	display: block;
48}
49
50dl>div.appear dt::after {
51	/* プラスマークから×マークに（回転している） */
52	transform: rotate(45deg);
53}
54
55@keyframes fadeIn {
56	0% {
57		opacity: 0;
58		transform: translateY(-10px);
59	}
60	100% {
61		opacity: 1;
62		transform: none;
63	}
64}
65

js
1"use strict";
2
3{
4  const dt = document.getElementsByClassName("dt");
5  const dd = document.getElementsByClassName("dd");
6  console.log(dt);
7  dt.forEach((test) => {
8    test.addEventListener("click", () => {
9      dt.classList.toggle("show");
10
11      dt.forEach((dd) => {
12        if (dd.classList !== dd) {
13          dd.classList.remove("show");
14        }
15      });
16    });
17  });
18}

hatena19

2022/09/16 11:45

HTML、CSS、JS それぞれ別のコードブロックに分けてください。まとめて書くとコードブロックのコピー機能が無意味になりますので。 ```HTML ここにHTMLコード ``` ```CSS ここにCSSコード ``` ```JavaScript ここにJSコード ```

yukarin

2022/09/16 12:15

```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>FAQ</title> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <h1>FAQ</h1> <dl> <div> <dt>質問です</dt> <dd>回答です。。</dd> </div> <div> <dt>質問です</dt> <dd>回答です。。</dd> </div> <div> <dt>質問です</dt> <dd>回答です。</dd> </div> </dl> <script src="js/main.js"></script> </body> </html> ``` ```css h1 { font-size: 18px; border-bottom: 1px solid; padding: 8px 16px; margin-bottom: 16px; } dl { margin: 0; } dl > div { margin-bottom: 8px; } dt { padding: 8px; cursor: pointer; user-select: none; /* ↑クリック連打してもテキストが選択されない */ position: relative; } dt::before { content: "Q. "; } dt::after { content: "+"; position: absolute; top: 8px; right: 16px; transition: transform 0.8s; } dd { padding: 8px; margin: 0; display: none; } dd::before { content: "A. "; } /* dl > div.appear dd { display: block; animation: 0.3s fadeIn; } */ dd.show{ display: block; } dl > div.appear dt::after { /* プラスマークから×マークに（回転している） */ transform: rotate(45deg); } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } } ``` ```js "use strict"; { const dt = document.querySelectorAll("dt"); dt.forEach((dt) => { dt.addEventListener("click", () => { const dd = dt.nextElementSibling; dd.classList.toggle("show"); dt.forEach((dd) => { if (dd.classList !== "show") { dd.classList.remove("show"); } }); }); }); } ```

yukarin

2022/09/16 12:25

ご指摘ありがとうございます。変更いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

JSでshowクラスをddに付与してますが、これは、dt に付与した方がシンプルになりますので、この設計に変更します。

まず、CSSを変更します。

css
1/* dd.show{ */
2dt.show + dd{
3  display: block;
4  animation: 0.3s fadeIn; /* 追加 */
5}
6
7/* dl > div.appear dt::after { */
8dt.show::after {
9  /* プラスマークから×マークに（回転している） */
10  transform: rotate(45deg);
11}

JSコードは下記になります。

JavaScript
1"use strict";
2{
3  const dts = document.querySelectorAll("dt");
4  dts.forEach((dt) => {
5    dt.addEventListener("click", (e) => {
6      const dtshow = document.querySelector("dt.show");
7      if(dtshow && dtshow != e.target ){dtshow.classList.remove("show")};
8      e.target.classList.toggle("show");
9    });
10  });
11}