アコーディオンメニューについて（jQuery）

前提・実現したいこと

【実現したいこと】
jqueryを用いてアコーディオンメニューを実装したい。

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

メニューバーをクリックすると、アイコンが連動する動作が作れない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
8    <title>Document</title>
9</head>
10<body>
11    <section class="question" id="question">
12        <div class="question-inner">
13        <h2 class="question-tit">よくあるご質問</h2>
14        <div class="question-box">
15        <div class="question-box-upper">
16        <p class="question-txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
17        <div class="question-open question-open-btn"><span></span></div>
18        </div>
19        <div class="question-box-lower">
20        <p class="question-txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
21        </div>
22        </div>
23        <div class="question-box">
24        <div class="question-box-upper">
25        <p class="question-txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
26        <div class="question-open question-open-btn"><span></span></div>
27        </div>
28        <div class="question-box-lower">
29        <p class="question-txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
30        </div>
31        </div>
32        <div class="question-box">
33        <div class="question-box-upper">
34        <p class="question-txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
35        <div class="question-open question-open-btn"><span></span></div>
36        </div>
37        <div class="question-box-lower">
38        <p class="question-txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
39        </div>
40        </div>
41        </div>
42        </section>
43
44        <script src="javascript.js"></script>
45</body>
46</html>

css
1vvvvvhtml, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
2    margin: 0;
3    padding: 0;
4    border: 0;
5    font-weight: normal;
6    font-size: 100%;
7    vertical-align: baseline;
8    -webkit-box-sizing: border-box;
9    -moz-box-sizing: border-box;
10    box-sizing: border-box;
11  }
12  
13  article, header, footer, aside, figure, figcaption, nav, section {
14    display: block;
15  }
16  
17  body {
18    line-height: 1;
19    -ms-text-size-adjust: 100%;
20    -webkit-text-size-adjust: 100%;
21  }
22  
23  ol, ul {
24    list-style: none;
25    list-style-type: none;
26  }
27
28.question {
29    background: rgba(33, 150, 243, 0.07);
30  }
31  
32  .question-inner {
33    width: 1200px;
34    max-width: 100%;
35    margin: 0 auto;
36    padding-bottom: 76px;
37  }
38  
39  .question-tit {
40    padding-top: 124px;
41    padding-bottom: 68px;
42    font-size: 40px;
43    font-family: a-otf-futo-go-b101-pr6n, sans-serif;
44    font-style: normal;
45    font-weight: bold;
46    display: flex;
47    align-items: center;
48  }
49  
50  .question-tit:before, .question-tit:after {
51    border-top: 1px solid;
52    content: "";
53    flex-grow: 1;
54  }
55  
56  .question-tit:before {
57    margin-right: 48px;
58  }
59  
60  .question-tit:after {
61    margin-left: 48px;
62  }
63  
64  .question-box {
65    width: 1104px;
66    max-width: 100%;
67    margin: 0 auto;
68    padding-bottom: 32px;
69  }
70  
71  .question-box-upper {
72    background: #2196F3;
73    color: #fff;
74    height: 96px;
75    position: relative;
76    z-index: 0;
77  }
78  
79  .question-box-lower {
80    height: 96px;
81    background: #fff;
82  }
83  
84  .question-icon {
85    position: absolute;
86    top: 40px;
87    left: 32px;
88  }
89  
90  .question-txt {
91    font-size: 16px;
92    font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
93    padding: 41px 0 39px 82px;
94  }
95  
96  .question-open {
97    display: inline-block;
98    width: 50px;
99    height: 50px;
100    position: absolute;
101    top: 23px;
102    right: 27px;
103    cursor: pointer;
104    transition: all .3s;
105  }
106  
107  .question-open-btn span::before, .question-open ::after {
108    display: block;
109    content: "";
110    position: absolute;
111    top: 50%;
112    left: 10%;
113    width: 40px;
114    height: 3px;
115    border-radius: 2px;
116    background: #fdfdfd;
117    transform: rotate(180deg);
118    transition: all .2s;
119  }
120  
121  .question-open-btn span::after {
122    transform: rotate(90deg);
123    transition: all .2s;
124  }
125

javascript
1'use strict';
2
3$(function ($) {
4    $(".question-box-lower").css("display", "none");
5      $(".question-box-upper").on("click", function () {
6        $(".question-box-upper").not(this).next().slideUp(300);
7        $(this).next().slideToggle(300);
8      });
9    });   
10
11$(function ($) {
12    $(".question-open").on("click", function () {
13      $(".question-open").not(this).addClass("question-open-btn");
14        $(this).toggleClass("question-open-btn");
15      });
16    });

試したこと

question-box-upperクラスが指定されているdivタグに新たにopenクラスを指定し、openクラスの付与でアイコンのプラスとマイナスを切り替えるCSSを考える。
➡︎アイコンが表示されなくなる。

question-box-upperのjsのクリックイベントに、question-openを追加する。
➡︎アイコンが動かなくなる。

補足情報（FW/ツールのバージョンなど）

なお、メニューバーを１つ開いたら、他は閉じるようにしたいです。

参考サイト
https://125naroom.com/demo/jquery-accordion.html#s_02

説明が分かりずらいところもあるかと思いますが、どなたかご教授していただけると幸いです。

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

回答1件

ベストアンサー

以下のコードで連動するかと思います。

javascript
1'use strict';
2
3$(function ($) {
4    $(".question-box-lower").css("display", "none");
5    $(".question-box-upper").on("click", function () {
6      $(".question-box-upper").not(this).next().slideUp(300);
7      $(this).next().slideToggle(300);
8
9      var openBtn = $(this).find('.question-open');
10      $(".question-open").not(openBtn).addClass("question-open-btn");
11      $(openBtn).toggleClass("question-open-btn");
12    });
13});
14
15