jqueryのアコーディオンが動きません

jqueryのアコーディオン

三つのアコーディオンを作成しました。
一番上のアコーディオンは動作するのですが、
その下の二つのアコーディオンが動作しません。

何がおかしいのか見当がつかない状況です。

わかる方がいましたら、教えていただけますでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="css/style.css">
9    <script src="js/jquery.min.js" defer></script>
10    <script src="js/script.js" defer></script>
11    <title>jQueryアコーディオン</title>
12</head>
13
14<body>
15    <div class="wrapper">
16        <h2 class="ttl">
17            募集職種
18        </h2><!-- /.ttl -->
19        <ul class="accoList">
20            <li class="accoList-1">
21                <div class="accoList-ttl" id="slide-btn">
22                    <h3>１．Webディレクター</h3>
23                </div><!-- /.accoList-ttl -->
24                <div class="accoList-list" id="slide-view">
25                    <dl>
26                        <dt>仕事内容</dt>
27                        <dd>テキストテキストテキストテキスト
28                        </dd>
29                        <dt>応募資格
30                        </dt>
31                        <dd>テキストテキストテキストテキスト
32                        </dd>
33                        <dt>必須スキル
34                        </dt>
35                        <dd>テキストテキストテキストテキスト
36                        </dd>
37                        <dt>給与</dt>
38                        <dd>XXX万～XXX万 (スキル・経験・実績により優遇)
39                        </dd>
40                        <dt>休日・休暇
41                        </dt>
42                        <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
43                        </dd>
44                        <dt>雇用形態
45                        </dt>
46                        <dd>正社員（試用期間3ヶ月）
47                            <br>業務委託
48                        </dd>
49                        <dt>勤務時間
50                        </dt>
51                        <dd>フレックスタイム
52                        </dd>
53                        <dt>勤務地
54                        </dt>
55                        <dd>東京</dd>
56                    </dl>
57                </div><!-- /.accoList-list -->
58            </li><!-- /.accoList-1 -->
59            <li class="accoList-2">
60                <div class="accoList-ttl" id="slide-btn">
61                    <h3>２．Webデザイナー</h3>
62                </div><!-- /.accoList-ttl -->
63                <div class="accoList-list" id="slide-view">
64                    <dl>
65                        <dt>仕事内容</dt>
66                        <dd>テキストテキストテキストテキスト
67                        </dd>
68                        <dt>応募資格
69                        </dt>
70                        <dd>テキストテキストテキストテキスト
71                        </dd>
72                        <dt>必須スキル
73                        </dt>
74                        <dd>テキストテキストテキストテキスト
75                        </dd>
76                        <dt>給与</dt>
77                        <dd>XXX万～XXX万 (スキル・経験・実績により優遇)
78                        </dd>
79                        <dt>休日・休暇
80                        </dt>
81                        <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
82                        </dd>
83                        <dt>雇用形態
84                        </dt>
85                        <dd>正社員（試用期間3ヶ月）
86                            <br>業務委託
87                        </dd>
88                        <dt>勤務時間
89                        </dt>
90                        <dd>フレックスタイム
91                        </dd>
92                        <dt>勤務地
93                        </dt>
94                        <dd>東京</dd>
95                    </dl>
96                </div><!-- /.accoList-list -->
97            </li><!-- /.accoList-2 -->
98            <li class="accoList-3">
99                <div class="accoList-ttl" id="slide-btn">
100                    <h3>３．プログラマー
101                    </h3>
102                </div><!-- /.accoList-ttl -->
103                <div class="accoList-list" id="slide-view">
104                    <dl>
105                        <dt>仕事内容</dt>
106                        <dd>テキストテキストテキストテキスト
107                        </dd>
108                        <dt>応募資格
109                        </dt>
110                        <dd>テキストテキストテキストテキスト
111                        </dd>
112                        <dt>必須スキル
113                        </dt>
114                        <dd>テキストテキストテキストテキスト
115                        </dd>
116                        <dt>給与</dt>
117                        <dd>XXX万～XXX万 (スキル・経験・実績により優遇)
118                        </dd>
119                        <dt>休日・休暇
120                        </dt>
121                        <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
122                        </dd>
123                        <dt>雇用形態
124                        </dt>
125                        <dd>正社員（試用期間3ヶ月）
126                            <br>業務委託
127                        </dd>
128                        <dt>勤務時間
129                        </dt>
130                        <dd>フレックスタイム
131                        </dd>
132                        <dt>勤務地
133                        </dt>
134                        <dd>東京</dd>
135                    </dl>
136                </div><!-- /.accoList-list -->
137            </li><!-- /.accoList-3 -->
138        </ul><!-- /.accoList -->
139    </div><!-- /.wrapper -->
140</body>
141
142</html>

css
1*, ::after, ::before {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  padding: 0;
8  background-color: #fffbef;
9}
10
11li {
12  list-style: none;
13}
14
15ul {
16  padding: 0;
17}
18
19.wrapper {
20  max-width: 960px;
21  padding: 0 20px;
22  margin: 100px auto;
23}
24
25.accoList-ttl {
26  padding: 30px 20px;
27  border-top: 1px solid #000;
28  border-bottom: 1px solid #666;
29  transition: .5s;
30}
31
32.accoList-ttl:hover {
33  background-color: #ffda5f;
34}
35
36.accoList-list {
37  display: none;
38}
39
40.accoList dl {
41  display: flex;
42  flex-wrap: wrap;
43  padding: 20px;
44}
45
46.accoList dl dt {
47  width: 20%;
48  margin-bottom: 20px;
49}
50
51.accoList dl dd {
52  width: 75%;
53  margin-bottom: 20px;
54}
55

jQuery
1'use strict';
2
3$(function() {
4    $(this).on('click', function() {
5        // console.log("yes");
6        // 押されたボタンの次の要素の
7        $(this).next().slideToggle();
8    })
9})

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

回答1件

ベストアンサー

まず、一つのHTML内にidの重複は許されません。

html
1              <div class="accoList-ttl" id="slide-btn">

slide-btn が重複してますので、これをclassの方に移動させます。

html
1              <div class="accoList-ttl slide-btn">

.slide-btnの要素をクリックしたときに、アコーディオンを開閉したいので、それのクリック時で次の要素を開閉(slideToggle())させるようにします。

js
1$(function() {
2    $('.slide-btn').on('click', function() {
3        // console.log("yes");
4        // 押されたボタンの次の要素の
5        $(this).next().slideToggle();
6    })
7})