Use .slidetoggle to make div expand and collapse again on page load

问题

Hi guys i have a div box with text which is hidden until you click a button and then it .slideToggles open to its height and then when you click again it toggles closed.

Now what i would like to do is on page load for the box to expand and then collapse again and stop (not auto repeat ), so that people see that there is content hidden away and to click the button. Can anyone help with this?? I'm not big into jQuery.

Here's what i've got.

        $(document).ready(function() {

            $("#page-information").hide();
                $(".info-tab").toggle(function() {
                    $(".info-tab").addClass("info-active");
                    }, function () {
                    $(this).removeClass("info-active");
                }); 
                $(".info-tab").click(function() {
                    $("#page-information").slideToggle('slow');
                });
            });

Any help would be greatly appreciated. I thought you could just do two slidetoggles back to back at the beginning but obvioulsy not.

Thanks guys.

回答1:

Give this a go:

$(document).ready(function() {

    $("#page-information").slideDown('slow', function(){
        setTimeout("$('#page-information').slideUp('slow');", 500);
    });
    $(".info-tab").toggle(function() {
        $(".info-tab").addClass("info-active");
        }, function () {
        $(this).removeClass("info-active");
    });
    $(".info-tab").click(function() {
        $("#page-information").slideToggle('slow');
    });
});

Example of it working: http://jsfiddle.net/ufomammut66/yRqqq/2/

回答2:

Maybe this?

$(document).ready(function() {

   $(".info-tab").toggle(function() {
       $(".info-tab").addClass("info-active");}
   });

   setTimeout(function(){
       $(".info-tab").toggle(function() {
          $(this).removeClass("info-active");
          $("#page-information").slideToggle('slow');
       });
    }, 1000);



        $("#page-information").hide();
            $(".info-tab").toggle(function() {
                $(".info-tab").addClass("info-active");
                }, function () {
                $(this).removeClass("info-active");
            }); 
            $(".info-tab").click(function() {
                $("#page-information").slideToggle('slow');
            });
        });

来源：https://stackoverflow.com/questions/9433552/use-slidetoggle-to-make-div-expand-and-collapse-again-on-page-load

标签

jquery

slidetoggle