javascript - JavaScript を使用した折りたたみ可能なヘッダー コンテンツ

Question

コンテンツを折りたたんで展開するための適切な JavaScript を書くのに苦労しています

意見：

<div>
    <h3 id="roleHeader" class="roleHeader collapsible">Title</h3>
    <div>Content to display to users</div>
</div>

JavaScript:

$(document).ready(function() {
            //collapsible management
            $('.collapsible').collapsible({
            });
        });

Answer 1

非常に簡単に実装できます

jQuery(function($){
    $('.collapsible').click(function(){
        $(this).next().stop(true, true).slideToggle();
    }).next().hide()
})

デモ:フィドル

Answer 2

あなたはおそらく を探していslideToggleます。この関数は、コンテンツの上下のスライドを切り替えます。

これを試して

   $(document).ready(function() {
        $('.collapsible').click(function(){
            $(this).slideToggle(500);
        });
    });

500 はアニメーションの速度です。

非表示にしたいオブジェクトや表示したいオブジェクトをターゲットにすることもできます。ID、クラスを指定するか、jQuery で具体的にターゲットにします。ここで、 のクラスを持つものをクリックするとcollapsible、次divが非表示になり、表示されます。

    $(document).ready(function() {
        $(".collapsible").click(function(){
            $(this).next("div").slideToggle(500);
        });
    });

ジャンプ効果を防ぐためにもう一度クリックしたときにアニメーションを停止する必要がある場合は.stop(true)、効果の前に追加します

    $(document).ready(function() {
        $(".collapsible").click(function(){
            $(this).next("div").stop(true).slideToggle(500);
        });
    });