🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

969閲覧

アコーディオンでデフォルト非表示部分が開きません

KUDOO

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/09/09 14:22

編集2019/09/09 14:51

前提・実現したいこと

アコーディオンでQ&Aを作りたいです。

questionをクリックしたら、それに対応するanswerを表示させたいです。

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

該当のquestionをクリックしても、それに対応するanswerが表示されません。

該当のソースコード

HTML5

1<section class="faq"> 2 <h2><i class="far fa-envelope-open"></i>よくある質問</h2> 3 <ul class="faq-list"> 4 <li class="faq-list-item"> 5 <h3 class="que"> 6 <a href=""><i class="far fa-check-circle"></i>プログラミングスキルは必要ですか?</a> 7 </h3> 8 <span>+</span> 9 <div class="ans"> 10 <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p> 11 </div> 12 </li> 13 </ul> 14 </section> 15

jQuery

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

試したこと

補足情報(FW/ツールのバージョンなど)

下記はindex内に記入しております。
.<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
.<script src="script.js"></script>

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

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

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

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

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

kei344

2019/09/09 14:40

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

2019/09/09 14:59

質問の仕方が間違っており大変失礼いたしました。教えていただきありがとうございます!
guest

回答1

0

ベストアンサー

こんばんは!
確認してみましたが、それぞれに対応して 非表示⇆表示 になっていましたよ。

・外部化したファイルがちゃんと読み込めているか
・JSを呼び出す箇所は適切か
・余分な記述が残っていないか

など確認してみると良いかと思います^^

投稿2019/09/09 14:42

Meeets

総合スコア48

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

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

KUDOO

2019/09/09 14:58

教えていただきありがとうございます!ちゃんと動きました。お手数をおかけしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問