jQueryでアコーディオン機能を実装したい

isara の模写をしており、よくある質問のアコーディオン機能を実装したいのですが、うまくいきません。
原因と解決法が知りたいです。

調べたところ、[https://125naroom.com/web/3046]こちらのサイトを参考に作成したのですが、うまくいきませんでした。
ここのサンプルを貼り付けて試したところ、サンプルについては機能していましたので、linkや構文が（｝が足りないなど）間違っているということはなさそうです。

よろしくお願いします。

html
1コード<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6    <title>question</title>
7    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
8  </head>
9  <body>
10    <div class="faq">
11      <h1>よくある質問</h1>
12
13      <ul id="faq-list">
14
15         <li class="faq-list-item">
16           <h3 class="question"><span><i class="far fa-question-circle fa-fw qqq" ></i></span>プログラミングスキルは必要ですか？</h3>
17           <i class="fas fa-angle-down near fa-2x"></i>
18           <div class="answer">
19             <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p>
20           </div>
21         </li>
22
23         <li class="faq-list-item">
24           <h3 class="question"><span><i class="far fa-question-circle fa-fw qqq"></i></span>参加費以上に稼げなかったらどうなりますか？</h3>
25           <i class="fas fa-angle-down near fa-2x"></i>
26           <div class="answer">
27             <p>参加費である258,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。（講座参加後、週30時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</p>
28           </div>
29         </li>
30
31         <li class="faq-list-item">
32           <h3 class="question"><span><i class="far fa-question-circle fa-fw qqq"></i></span>滞在中の宿泊先はどうなりますか？</h3>
33           <i class="fas fa-angle-down near fa-2x"></i>
34           <div class="answer">
35             <p>宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</p>
36           </div>
37         </li>
38
39       </ul>
40
41
42    </div>
43    <script src="javascript.js"></script>
44  </body>
45</html>
46

css
1コード.faq{
2  text-align: center;
3}
4.faq-list-item {
5  position:relative;
6  cursor:pointer;
7  text-align: left;
8  list-style: none;
9  margin-left: auto;
10  margin-right: auto;
11  margin-bottom:5px;
12  width: calc(100% - 20px - 20px);
13  max-width: 1000px;
14}
15
16.faq-list-item h3 {
17  font-size: 20px;
18}
19.near{
20  position:absolute;
21  top:15px;
22  right:15px;
23  color:#ccc;
24  font-size:13px;
25}
26.qqq{
27  color:#5AA1C7;
28}
29.question{
30  border:1px solid #E5E5E5;
31  padding:15px;
32  margin-bottom:5px;
33}
34
35.answer {
36  font-size: 14px;
37  font-weight:600;
38  letter-spacing:2px;
39  padding: 5px 0px;
40  margin-bottom: 15px;
41   display: none;
42}
43.answer p{
44  text-align: left;
45}
46
47

javascript
1コード$(function(){
2
3
4  $('.question .near').click(function() {
5      $(this).next('.answer').slideToggle();
6      $(this).toggleClass("open");
7      // $(this).find('.near').text('fas fa-angle-up fa-2');
8      });
9});
10

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

回答1件

ベストアンサー

.question .nearという要素がないのでクリックできない。

js
1  $('.question').click(function() {
2      $(this).next().next('.answer').slideToggle(); //nextに'.answer'が無い
3      $(this).toggleClass("open");
4      });
5```**動くサンプル：**[https://jsfiddle.net/m1vpza4n/](https://jsfiddle.net/m1vpza4n/)