jQueryが読み込まない原因がわかりません

現在模写コーディングを行う上でjQeryが動かずに困っています。
検証ツールのコンソールでエラーを確認したところ「Uncaught ReferenceError: jQuery is not defined at index.html:11」と出ていました。「Uncaught ReferenceError: jQuery is not defined」はよく出るエラーとのことで色々調べてはいるのですが、バージョンが古い訳でもないし、コード間違いは確認した限りでは無さそうだし、srcのURLが間違っている訳でもなく、、、。原因がわからず困っています。

下記にコードを貼っておりますので、どこか読み込めない原因があれば教えて欲しいです。
必要かわかりませんが以下を念のため記載しておきます。
エディタ：Atom
PC：Mac
開発環境：ローカル環境

コードはコピペなので、間違いなく読み込めてないだけだと思うので、どなたか教えてください、、、。
※質問の下部に模写サイトとコピペしたアコーディオンメニュのコードが記載されているサイトのURLを参考までに貼っておきます。
どうぞよろしくお願いたします。

HTML5
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">
6    <link rel="stylesheet" href="css/stylesheet.css">
7    <link rel="stylesheet" href="css/responsive.css">
8    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9    <!-- jQuery -->
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
11    jQuery(function ($) {
12      $('.article-title').on('click', function () {
13        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
14        $(this).toggleClass('open');/*矢印の向きを変更*/
15      });
16    });
17    </script>
18<!--〜〜間のコードは省略してます〜〜-->
19    <div class="qa_3">
20      <div class="container">
21        <h1><i class="far fa-envelope-open"></i>よくある質問</h1>
22        <div id="accordion" class="accordion-container">
23          <h4 class="article-title">プログラミングスキルは必要ですか？</h4>
24          <div class="accordion-content">
25            <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p>
26          </div><!--/.accordion-content-->
27          <h4 class="article-title">参加費以上に稼げなかったらどうなりますか？</h4>
28          <div class="accordion-content">
29            <p>参加費である248,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。（講座参加後、週30時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</p>
30          </div><!--/.accordion-content-->
31          <h4 class="article-title">滞在中の宿泊先はどうなりますか？</h4>
32          <div class="accordion-content">
33            <p>宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</p>
34          </div><!--/.accordion-content-->
35          <h4 class="article-title">滞在中の食事はどうなりますか？</h4>
36          <div class="accordion-content">
37            <p>拠点となる新築シェアハウスの周辺に、50バーツ程度の（160円）安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</p>
38          </div><!--/.accordion-content-->
39        </div><!--/#accordion-->
40      </div>
41    </div>
42    <footer>
43      <div class="container">
44      <p>バンコクのノマドエンジニア育成講座、iSara[イサラ]<br>Copyright ©︎ iSara All Rights Reserved.</p>
45      <p>Designed by Maya Ogi / Developed by Kentaro Koga</p>
46      </div>
47    </footer>
48  </body>
49</html>
50

CSS3
1@charset "utf-8";
2*{
3
4}
5body{
6  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
7  margin:0 auto;
8}
9li{
10  list-style: none;
11}
12/* container */
13.container{
14  width:1200px;
15  margin-left:auto;
16  margin-right:auto;
17  text-align:center;
18  height:auto;
19}
20
21/*--〜〜間のCSSは省略してます〜〜--*/
22
23/* qa_3 */
24.qa_3{
25  display:inline-block;
26  width:100%;
27  height:1600px;
28}
29.accordion-container {
30  position: relative;
31  width: 100%;
32  border: 1px solid #0079c1;
33  border-top: none;
34  outline: 0;
35  cursor: pointer
36}
37
38.accordion-container .article-title {
39  display: block;
40  position: relative;
41  margin: 0;
42  padding: 0.625em 0.625em 0.625em 2em;
43  font-size: 1.25em;
44  font-weight: normal;
45  color: #fff;
46  background: #000;
47  cursor: pointer;
48}
49
50.accordion-container .article-title:hover,
51.accordion-container .article-title:active,
52.accordion-container .content-entry.open .article-title {
53  background-color: #00aaa7;
54  color: white;
55}
56
57.accordion-container .article-title:hover i:before,
58.accordion-container .article-title:hover i:active,
59.accordion-container .content-entry.open i {
60  color: white;
61}
62
63.article-title{
64  position: relative;
65}
66
67.article-title:after {
68  content: "";
69  position: absolute;
70  right: 25px;
71  top: 38%;
72  transition: all 0.2s ease-in-out;
73  display: block;
74  width: 8px;
75  height: 8px;
76  border-top: solid 2px #fff;
77  border-right: solid 2px #fff;
78  -webkit-transform: rotate(135deg);
79  transform: rotate(135deg);
80}
81
82.article-title.open:after {
83  -webkit-transform: rotate(-45deg);
84  transform: rotate(-45deg);
85  top: 45%;
86}
87
88.accordion-content {
89  display: none;
90  padding-left: 2.3125em;
91}
92
93/* CSS for CodePen */
94.accordion-container {
95  width: 300px;
96  margin: 1.875em auto;
97}
98
99/* footer */
100footer{
101  display:inline-block;
102  width:100%;
103  height:200px;
104  background-color:#ECECEC;
105}
106

JS
1<!-- jQuery -->
2    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
3    jQuery(function ($) {
4      $('.article-title').on('click', function () {
5        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
6        $(this).toggleClass('open');/*矢印の向きを変更*/
7      });
8    });
9    </script>

模写サイトURL
https://isara.life/
コピペしたアコーディオンメニューの元サイトURL
https://flex-box.net/accordion/

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

回答2件

ベストアンサー

html
1<!-- jQuery -->
2    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
3    jQuery(function ($) {
4      $('.article-title').on('click', function () {
5        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
6        $(this).toggleClass('open');/*矢印の向きを変更*/
7      });
8    });
9    </script>

↓

html
1<!-- jQuery -->
2    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
3
4    <script>
5    jQuery(function ($) {
6      $('.article-title').on('click', function () {
7        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
8        $(this).toggleClass('open');/*矢印の向きを変更*/
9      });
10    });
11    </script>

投稿2019/10/18 10:20

退会済みユーザー

総合スコア0

gerick

2019/10/18 10:53

本当にありがとうございます。完全に抜けてましたね・・・・。笑大変助かりました！！うまく作動できました！！数秒早くお応えをいただいたのでベストアンサーとさせていただきます！

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

HTML
1    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
2    jQuery(function ($) {
3      $('.article-title').on('click', function () {
4        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
5        $(this).toggleClass('open');/*矢印の向きを変更*/
6      });
7    });
8    </script>
9```↓
10```HTML
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
12    <script>
13    jQuery(function ($) {
14      $('.article-title').on('click', function () {
15        $(this).next().slideToggle(200);/*クリックでコンテンツを開閉*/
16        $(this).toggleClass('open');/*矢印の向きを変更*/
17      });
18    });
19    </script>