0

前提・実現したいこと
webサイト上でのアコーディオン実装

発生している問題・エラーメッセージ
質問をクリックするとその答えがスライドして表示/非表示されるはずが、
なぜかそうならないのです。

どういじれば、動きますか?

該当のソースコード

htmlファイル

 <div class="container">
            <div class="accordion">
                <div class="accordion-container">
                    <h4 class="accordion-title jsAccordionTitle">Engressはサラリーマンでも学習を続けられるでしょうか?</h4>
                    <div class="accordion-content">Engressは各個人に最適な学習プランをご提供しております。サラリーマンの方でも継続できます。</div>
                    <h4 class="accordion-title jsAccordionTitle">教材はオリジナルのものを使用しているのでしょうか?</h4>
                    <div class="accordion-content">Engressは各個人に最適な学習プランをご提供しております。サラリーマンの方でも継続できます。</div>
                    <h4 class="accordion-title jsAccordionTitle">講師に日本人はいますか?</h4>
                    <div class="accordion-content">Engressは各個人に最適な学習プランをご提供しております。サラリーマンの方でも継続できます。</div>
                    <h4 class="accordion-title jsAccordionTitle">TOEFL以外の海外大学合格のサポートもしてもらえるのでしょうか?</h4>
                    <div class="accordion-content">Engressは各個人に最適な学習プランをご提供しております。サラリーマンの方でも継続できます。</div>
                </div>
            </div>
        </div>

JSファイル

jQuery(function($) {
    $('.accordion-title').click(function() {
        $('.accordion-content').slideToggle();
    });
});

1 件の回答 1

1

下記でどうでしょう。

jQuery(function($) {
    $('.accordion-content').hide()
    $('.accordion-title').click(function() {
        $(this).next().slideToggle();
    });
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。