jQ/Javascriptでのアコーディオン実装（Q&A）

表題のように、Q&Aの箇所（最下部）を以下のように実装したつもりです。

・「質問（faq-list-item）」の要素をクリックする「答え（answer）」が出る
・「答え（answer）」をクリックすると「答え（answer）」が閉じる

ただ、クリックしても反応せずに、原因が分からない状態ですｓ。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>民泊本舗</title>
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
9    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
11  <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
12  <link rel="stylesheet" href="css/style.css">
13  <link rel="stylesheet" href="css/reset.css">
14</head>
15
16<body>
17  <div id="fakeLoader"></div>
18  <div class="site-header d-lg-block d-none">
19   <nav class="my-2 navbar navbar-expand-lg">
20      <a class="navbar-brand pl-5"><img src="images/icon.png" height="45px">
21      </a>
22      <div id="base-menu" class="collapse navbar-collapse">
23        <ul class="navbar-nav mr-auto">
24          <li class="h5 nav-item mr-3 active  top-menu-text"><a href="" class="nav-link text-info">Home<br><span
25                class="texts">※テストサイトです</span></a></li>
26          <li class="h5 nav-item mt-3 mr-3 active  top-menu-text"><a href="" class="nav-link">サービスの概要</a></li>
27          <li class="h5 nav-item mt-3 mr-3 active  top-menu-text"><a href="" class="nav-link">利用の流れ</a></li>
28          <li class="h5 nav-item mt-3  active  top-menu-text"><a href="" class="nav-link">価格表</a></li>
29        </ul>
30        <span class="navbar-text mr-3" style="font-weight: normal;">現在の登録人数</span>
31        <span class="navbar-text mr-3" style="font-weight: bold; font-size: 26px; color: #484848;">52,024人</span>
32        <form class="form-inline mr-5">
33          <button class="btn btn-info" type="button">お問い合わせ</button>
34        </form>
35      </div>
36    </nav>
37  </div>
38
39  <!-- main-visual -->
40  <section class="main">
41    <img src="images/main-visual.jpg" alt="main-visual" width="100%">
42    <div class="container">
43      <div class="cover-top d-lg-block d-none">
44        <div class="row">
45          <div class="bg-light p-4 rounded border-light top-form" id="top-form-menu">
46            <div class="form-group">
47              <h1 class="textxg mb-3 font-weight-bold font-block">民泊本舗とは？</h1>
48              <label class="textm mb-3 control-label">所有している空き家を民泊として利用できます！</label>
49            </div>
50            <div class="form-group borderrounded kashi-form">
51              <select class="form-control py-5">
52                <option>東京23区（東部）</option>
53                <option>東京23区（西部）</option>
54                <option>東京都下</option>
55              </select>
56            </div>
57            <div class="form-group border rounded gest-form">
58              <select class="form-control">
59                <option>賃貸マンション</option>
60                <option>賃貸アパート</option>
61                <option>一戸建て</option>
62                <option>その他</option>
63              </select>
64            </div>
65            <button class="mt-1 btn btn-info w-100" type="button" style="padding: 13px 0;">問い合わせ</button>
66          </div>
67        </div>
68      </div>
69    </div>
70  </section>
71
72  <!-- 3step -->
73  <section class="3step-wrapper wrapper-margin-bottom">
74    <div class="container mt-5">
75      <h2 class="textxg font-weight-bold pt-2 pb-2 text-center list-title">民泊本舗の3つの特徴</h2>
76      <div class="row mt-5">
77        <div class="col-lg-4 px-3">
78          <div>
79            <span class="badge rounded-circle bg-success mb-4 text-white">1</span>
80            <h5 class="mb-4 list-subtitle">無料でお部屋を掲載</h5>
81            <p class="text-secondary list-text">共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
82          </div>
83        </div>
84        <div class="col-lg-4 px-3  mt-5 mt-lg-0">
85          <div>
86            <span class="badge rounded-circle bg-success mb-4 text-white">2</span>
87            <h5 class="mb-4 list-subtitle">ホスティング方法を設定</h5>
88            <p class="text-secondary list-text">ご希望のスケジュール、料金、ゲストの要件を選びます。設定の際にはヒントも表示されます。</p>
89          </div>
90        </div>
91        <div class="col-lg-4 px-3  mt-5 mt-lg-0">
92          <div>
93            <span class="badge rounded-circle bg-success mb-4 text-white">3</span>
94            <h5 class="mb-4 list-subtitle">はじめてのゲストをもてなそう</h5>
95            <p class="text-secondary list-text">リスティングが掲載され次第、条件にかなったゲストから連絡を受けとることができます。ゲストの宿泊前にご質問があればメッセージを送信できます。
96            </p>
97            <a href="" class="text-info">ホスティングの始め方を学ぶ</a>
98          </div>
99        </div>
100      </div>
101    </div>
102  </section>
103
104
105  <!-- 該当箇所（Q&A） -->
106    <div class="faq-wrapper">
107      <div class="container">
108        <div class="heading">
109          <h2>FAQ</h2>
110        </div>
111        <div class="faq">
112          <ul id="faq-list">
113            <li class="faq-list-item">
114              <h3 class="question">Progateの公式キャラクターはなんですか？</h3>
115              <span>+</span>
116              <div class="answer">
117                <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
118              </div>
119            </li>
120            <li class="faq-list-item">
121              <h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>
122              <span>+</span>
123              <div class="answer">
124                <p>にんじゃわんこはオスです。</p>
125              </div>
126            </li>
127            <li class="faq-list-item">
128              <h3 class="question">にんじゃわんこは何歳ですか？</h3>
129              <span>+</span>
130              <div class="answer">
131                <p>にんじゃわんこは14歳です。</p>
132              </div>
133            </li>
134          </ul>
135        </div>
136      </div>
137    </div>
138
139  
140<script src="script.js"></script>
141<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
142<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
143<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
144</body>
145
146
147</html>

css
1html {
2  font-size: 10px; 
3}
4
5////////////// 共通CSS
6.textxs { font-size: 0.5rem;}
7.texts { font-size: 0.8rem;}
8.textm { font-size: 1rem;}
9.textl { font-size: 1.2rem;}
10.textxl { font-size: 1.5rem;}
11.textg { font-size: 2rem;}
12.textxg { font-size: 2.5rem;}
13.textj { font-size: 3rem;}
14.textxj { font-size: 3.5rem;}
15
16.wrapper-margin-bottom {
17  margin-bottom: 120px;
18}
19
20.font-weight-bold {
21  font-weight: bold;
22}
23
24.text-center {
25  text-align: center;
26}
27
28.title-border { 
29  width: 64px;
30  border: 1px solid #767676;
31  margin: 0 auto;
32}
33
34////////////// header
35a {
36  color: black;
37}
38
39.pos-f-t {
40  display: none;
41}
42
43///////////////////// 3step-wrapper
44.col-lg-4 .badge {
45  width: 40px;
46  height: 40px;
47  font-weight: 400;
48  line-height: 40px;
49  font-size: 22px;
50}
51
52
53//////////////////  faq
54/*faq wrapper*/
55.faq-wrapper {
56  background-color: #e6ecf0;
57  text-align: center;
58  padding-bottom: 80px;
59  color: #5f5d60;
60}
61
62#faq-list {
63  width: 500px;
64  margin: 0 auto;
65  padding: 0;
66  list-style: none;
67}
68
69/*アコーディオン追加 */
70.faq-list-item {
71  margin:10px;
72  border-bottom:1px solid #ccc;
73  position:relative;
74  cursor:pointer;
75  text-align: left;
76}
77
78.faq-list-item h3 {
79  font-size: 14px;
80}
81
82.faq-list-item span {
83  position:absolute;
84  top:0;
85  right:5px;
86  color:#ccc;
87  font-size:13px;
88}
89
90.answer {
91  font-size: 12px;
92  display: none;
93  padding: 5px 0px;
94  margin-bottom: 15px;
95}

js
1$(function() {
2  $('.faq-list-item').click(function() {
3    var $answer = $(this).find('.answer');
4    if($answer.hasClass('open')) { 
5      $answer.removeClass('open');
6      $answer.slideUp();
7      $(this).find('span').text('+');
8      
9    } else {
10      $answer.addClass('open'); 
11      $answer.slideDown();
12       $(this).find('span').text('-');
13    }
14  });
15});
16

お手数ですが、原因がわかる方はご助言いただけると幸いです。
宜しくお願い致します。

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

回答1件

ベストアンサー

調べたところ二点程問題点がありますね。
まず貼られてるJavascriptソースはscript.jsファイルに記述されているものと思っていますが、
JqueryのJSファイルより先に読み込んでるとJqueryの機能が使えません。
後に記述してください。

HTML
1・・・
2<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
3<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
4<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
5<script src="script.js"></script>
6・・・

それと参照されているjquery-3.4.1.slim.min.jsファイルにはslideUp、slideDown関数が含まれていません。
jquery-3.4.1.min.js等を使ってください。
それでアコーディオン機能の動作は確認できました。

投稿2020/02/03 11:25