问题描述:

i am struggling writing the appropriate javascript to collapse and expand my content

View:

<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({

});

});

网友答案:

You can implement one very easily

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

Demo: Fiddle

网友答案:

You are probably looking for slideToggle. This function will toggle between sliding the content up and down.

try this

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

500 is the speed of the animation.

You can also target the object you'd like to hide and show. Either give it an Id, class, or target it specifically with jQuery. Here, when you click on anything that has a class of collapsible, the next div will hide and show.

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

If you need the animation to stop when you click on it again to prevent a jumping effect, add .stop(true) before the effect

    $(document).ready(function() {
        $(".collapsible").click(function(){
            $(this).next("div").stop(true).slideToggle(500);
        });
    });
相关阅读:
Top