アコーディオンが作動しない（開閉しない）です・・

前提・実現したいこと

枠線がないタイプのアコーディオンを実現したいです。

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

見た目はできているのですが、アコーディオンが作動しない。
(開閉しないです・・・)

コード

html
1<body>
2    <div class="accordion-wrap">
3        <div class="accordion-item">
4            <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
5        </div>
6        <div class="accordion-text">
7            <p>あああ</p>
8        </div>
9    </div>
10</body>

css
1body{
2  width: 100%;
3  margin: 0 auto;
4  padding-top: 5%;
5}
6
7.accordion-wrap{
8    border-bottom: 1px solid #404040;
9}
10
11.accordion-item{
12  width: 100%;
13  margin: 0 auto;
14  cursor: pointer;
15
16  margin-top: 30px;
17}
18
19.accordion-header{
20  transition: ease-in-out 100ms;
21}
22
23.accordion-text{
24  width: 100%;
25  
26  display: none;
27  padding-top: 5px;
28  padding-bottom: 100px;
29 }
30
31 .fa{
32    transition: ease-in-out 300ms;
33 }
34
35 .rotate-fa{
36    transform: rotate(180deg);
37 }
38
39
40 .accordion-header .fa{
41    float: right;
42    line-height: 35px;
43 }
44
45 .accordion-gold{
46    color: #ffffff;
47 }
48
49 .accordion-no-bar{
50    border-bottom: 0;
51}

js
1$(".accordion-wrap").on("click", function(){   
2    $(this).children().eq(1).slideToggle(300);  
3    $(this).children().eq(0).toggleClass("accordion-no-bar");
4    $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
5    $(this).siblings().find(".accordion-header i").removeClass("rotate-fa");
6    $(this).find(".accordion-header").toggleClass("accordion-gold");
7    $(this).find(".fa").toggleClass("rotate-fa");
8
9    $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);
10});

追加分

js
1jQuery(function{
2	$(this).children().eq(1).slideToggle(300);  
3    $(this).children().eq(0).toggleClass("accordion-no-bar");
4    $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
5    $(this).siblings().find(".accordion-header i").removeClass("rotate-fa");
6    $(this).find(".accordion-header").toggleClass("accordion-gold");
7    $(this).find(".fa").toggleClass("rotate-fa");
8
9    $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);
10});

kei344

2020/02/03 15:15

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

ryooooou

2020/02/03 15:17

コードをブロックで囲みました。不慣れで大変申し訳ございません・・・・

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

回答1件

ベストアンサー

動くサンプル：https://jsfiddle.net/kny6sga1/

提示のコード自体は動くので、下記を確認してください。

jQueryを読み込んでいない
script要素の記述順が違う（jQueryが先）
HTMLのロードを待っていない（$(function{/*ここにコードを入れる*/})）

投稿2020/02/03 15:25

kei344

総合スコア69608

ryooooou

2020/02/03 15:49

ご回答ありがとうございます。素人で大変恐縮なのですが、「jQueryを読み込んでいない」とは、具体的にどのようなことをする必要がありますでしょうか？おそらく、上記が原因かとは思っているのですが・・・・

kei344

2020/02/03 16:34

script要素を使って適切なURLを指定する必要がありますが、そもそもHTMLが提示の物だけだとすると、提示されているCSSもJavaScriptもどちらも「読み込まれて」いません。

ryooooou

2020/02/03 16:39

HTMLは提示させていただきましたコードのみです・・・・どのようなHTMLコードを記載すると、jsが作動しますでしょうか・・・・？ご教授いただけますと幸いです。。

kei344

2020/02/03 16:42

【head には何が入る? HTML のメタデータ - ウェブ開発を学ぶ | MDN】 https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Applying_CSS_and_JavaScript_to_HTML 【初心者のためのjQuery入門講座【基本的な使い方】 | SHIROMAG】 https://www.notitle-weblog.com/getting-started-jquery

ryooooou

2020/02/04 12:56

ご返信が遅くなってしまい大変申し訳ございません。当方、wordpressを利用しているため、jQueryは読み込まれていることが確認できました。しかし、まだアコーディオンが作動していないのですが、こちら他に考えられる原因はどのようなものになるでしょうか・・・・？

kei344

2020/02/04 13:46

WordPressデフォルトのjQueryを使用しているなら、下記のようにしてください。 jQuery(function{/*ここにコードを入れる*/}); かつ、WordPressが出力するjQueryの読み出しコードより後に配置してください。

ryooooou

2020/02/04 14:31

ご回答ありがとうございます！質問のところに追加分としてjsを追記しました。上記のようなコードで認識あっていますでしょうか？

kei344

2020/02/04 14:45

違います。

ryooooou

2020/02/04 14:48

なるほど・・・・ jsにて、 jQuery(function{/*上記js*/}); であっていますでしょうか？

kei344

2020/02/04 14:52

コメントの意味がわかりません。また、追記文についても、何故クリックイベントを削除したのかもわかりません。

ryooooou

2020/02/04 15:06

知識不足申し訳ございません。調べてみたところ、wordpressでは、jQueryの部分を省略せずに記述する必要があることが分かりました。それに合わせてjsを下記のように書き換えてみたのですが、認識はあっていますでしょうか？ただ、まだアコーディオンが作動していない状態です・・・ jQuery(".accordion-wrap").on("click", function(){ jQuery(this).children().eq(1).slideToggle(300); jQuery(this).children().eq(0).toggleClass("accordion-no-bar"); jQuery(this).siblings().find(".accordion-header").removeClass("accordion-gold"); jQuery(this).siblings().find(".accordion-header i").removeClass("rotate-fa"); jQuery(this).find(".accordion-header").toggleClass("accordion-gold"); jQuery(this).find(".fa").toggleClass("rotate-fa"); jQuery(".accordion-wrap .accordion-text").not(jQuery(this).children().eq(1)).slideUp(300); });

kei344

2020/02/04 15:12

あー、すみません間違えていました。 jQuery(function($){/*ここにコードを入れる*/}); です。

ryooooou

2020/02/04 15:17

なるほど！下記コードで認識あっていますでしょうか？ jQuery(function($){ $(".accordion-wrap").on("click", function(){ $(this).children().eq(1).slideToggle(300); $(this).children().eq(0).toggleClass("accordion-no-bar"); $(this).siblings().find(".accordion-header").removeClass("accordion-gold"); $(this).siblings().find(".accordion-header i").removeClass("rotate-fa"); $(this).find(".accordion-header").toggleClass("accordion-gold"); $(this).find(".fa").toggleClass("rotate-fa"); $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300); }); });

ryooooou

2020/02/04 16:36

連投済みません。無事解決することができました！色々とご教授いただきありがとうございました。

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