質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2965閲覧

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

ryooooou

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/03 15:11

編集2020/02/04 14:31

前提・実現したいこと

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

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

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

コード

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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/02/03 15:15

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

2020/02/03 15:17

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

回答1

0

ベストアンサー

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


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

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

投稿2020/02/03 15:25

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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が作動しますでしょうか・・・・? ご教授いただけますと幸いです。。
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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問