jQueryを使ってアコーディオンメニューを完成させたいが効かなくて困ってる。

前提・実現したいこと

アコーディオンメニューを実装したい。

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

メニューが開かない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width" />
7    <meta name="description" content="" />
8    <title>Q&A</title>
9    <link rel="stylesheet" href="https://tomap.co/ZP_reset.css" />
10    <link rel="stylesheet" href="css/style.css" />
11    <script src="https://kit.fontawesome.com/d31af2c0f2.js"></script>
12  </head>
13
14  <body>
15    <section id="question">
16      <div class="inner">
17        <h2>よくある質問</h2>
18
19        <div class="question-wrap">
20          <p class="question">初心者でも大丈夫ですか？</p>
21          <p class="answer">
22            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
23          </p>
24
25          <p class="question">初心者でも大丈夫ですか？</p>
26          <p class="answer">
27            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
28          </p>
29
30          <p class="question">初心者でも大丈夫ですか？</p>
31          <p class="answer">
32            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
33          </p>
34
35          <p class="question">初心者でも大丈夫ですか？</p>
36          <p class="answer">
37            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
38          </p>
39
40          <p class="question">初心者でも大丈夫ですか？</p>
41          <p class="answer">
42            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
43          </p>
44
45          <p class="question">初心者でも大丈夫ですか？</p>
46          <p class="answer">
47            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
48          </p>
49
50          <p class="question">初心者でも大丈夫ですか？</p>
51          <p class="answer">
52            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
53          </p>
54
55          <p class="question">初心者でも大丈夫ですか？</p>
56          <p class="answer">
57            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
58          </p>
59
60          <p class="question">初心者でも大丈夫ですか？</p>
61          <p class="answer">
62            生徒様の９割以上は初心者からスタートしています。PCの基本操作やタイピングもしっかりサポート致します。
63          </p>
64        </div>
65      </div>
66    </section>
67
68    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
69    <script src="js/main.js"></script>
70  </body>
71</html>
72
73@charset "UTF-8";
74
75/* reset */
76*{
77	margin: 0;
78	padding: 0;
79}
80h1,h2,h3,h4,h5,h6 {
81  font-size: 100%;
82  font-weight: normal;
83}
84
85h2{
86  font-size: 20px;
87  text-align: center;
88  color: #c5b897;
89  position: relative;
90  margin-bottom: 23px;
91}
92
93h2::before{
94  content: '';
95  width: 40px;
96  height: 1px;
97  background: #c5b897;
98  position: absolute;
99  bottom: -4px;
100  left: 50%;
101  transform: translateX(-50%);
102}
103
104.inner{
105  max-width: 1200px;
106  margin: 0 auto;
107	padding: 0 2%;
108}
109
110#question{
111	padding: 60px 0 45px;
112}
113
114.question-wrap{
115	padding-top: 32px;
116}
117
118.question{
119	border: 1px solid #000;
120	background: #fff;
121	padding: 17px 7%;
122	position: relative;
123	cursor: pointer;
124	z-index: 1;
125}
126
127.question::before{
128	content: '\f2c4';
129	font-family: fontawesome;
130	color: #6f86a6;
131	font-size: 25px;
132	position: absolute;
133	top: 50%;
134	left: 2.5%;
135	transform: translateY(-50%);
136}
137
138.question::after{
139	content: '+';
140	font-size: 30px;
141	color: #6f86a6;
142	position: absolute;
143	top: 50%;
144	right: 2.5%;
145	transform: translateY(-50%);
146}
147
148.answer{
149	height: 0;
150	overflow: hidden;
151	transition: .4s;
152	background: #002d5f;
153	line-height: 1.5em;
154	color: #fff;
155	margin: -2px 0 3px;
156	padding: 0 3% 0 7%;
157	border: 1px solid #000;
158	display: flex;
159	align-items: center;
160	position: relative;
161}
162
163.answer::before{
164	content: '\f031';
165	font-family: fontawesome;
166	position: absolute;
167	color: #fff;
168	font-size: 23px;
169	position: absolute;
170	top: 50%;
171	left: 2.5%;
172	transform: translateY(-50%);
173}
174
175.question.open + .answer{
176	height: 85px;
177}
178
179.question.open::after{
180	content: 'ー';
181	font-size: 20px;
182	font-weight: bold;
183	top: 53%;
184}
185
186

試したこと

$(function(){
$('.question').on('click',function(){
$(this).next().slideToggle();
});
});

30分近く調べて出来なかったので聞きました。

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

m.ts10806

2020/10/19 01:36

>30分近く調べて出来なかったので聞きました。何をどう調べて何を試したのか記載してください。時間だけでわかる情報はゼロです。

m.ts10806

2020/10/19 01:37

あと、コードについてはファイル毎にわけてもらえたほうがこちらの手元で確認しやすいので、ご配慮願います。

You

2020/10/20 04:22

ご忠告ありがとうございました。

m.ts10806

2020/10/20 04:46

「質問への追記修正依頼」です。忠告ではありません。質問は編集できますので適宜ご対応ください。

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

回答2件

CSSとjQueryのコードを見ると、アコーディオンの開閉を、CSSアニメーションでする方法と、jQueryのslideToggle()でする方法とがごっちゃになってます。

たぶん、それぞれ異なるサイトのコードを意味も分からず一緒にしてしまったようですね。

jQueryのslideToggle()でする方法の場合

css
1.answer{
2/*  height: 0; 削除 */
3  overflow: hidden;
4/*  transition: .4s; 削除 */
5  background: #002d5f;
6  line-height: 1.5em;
7  color: #fff;
8  margin: -2px 0 3px;
9  padding: 25px 3% 25px 7%; /* 修正 上下パディングを適切に設定 */
10  border: 1px solid #000;
11  display: flex;
12  align-items: center;
13  position: relative;
14}
15
16/*  不要
17.question.open + .answer{
18  height: 85px;
19}
20*/

js
1$(function(){
2  $('.question').next().hide();
3  $('.question').on('click',function(){
4    $(this).toggleClass("open").next().slideToggle();
5  });
6});

CodePenサンプル

CSSアニメーションでする方法

CSSは質問のコードのままで修正不要

js
1$(function(){
2  $('.question').on('click',function(){
3    $(this).toggleClass("open");
4  });
5});

投稿2020/10/19 03:04

総合スコア34075

2020/10/20 03:47

とても参考になりました。ありがとうございます。

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

ベストアンサー

スタイルを適用しなければ、アコーディオン風に動作していますので、

javascript
1$(function(){
2  $('.question').on('click',function(){
3    $(this).next().slideToggle();
4  });
5});

この記述自体に問題はなさそうです。

「メニューが開かない」原因は、
「メニューが開いた状態」である時に、.question.open + .answerのスタイルが
適用されていないからかと思います。

これが適用されないと、.answerは、height:0;のままなので、
displayの状態がどの様に変わろうが中身が表示されることはないのかな、と。

ただし、↑を解決できたとしても、
slideToggle()は、要素そのもののdisplayをnoneかblockで切り替えるもので、
今の状態だとdisplay: none;にするところから始まりますので、
Yuki2さんの想定とは、逆（開くつもりで閉じて、閉じるつもりで開く）に
動くのではないでしょうか・・？
また、開いた時には.answer{ display: flex; }こちらが効かなくなるので、
予定しているレイアウトとも変わってしまうかも。。