使用.slidetoggle使div在页面加载时再次展开和折叠

Question

大家好，我有一个div的文本框，它是隐藏的，直到你点击一个按钮，然后它.slideToggles打开到它的高度，然后当你再次点击它切换关闭。

现在我想要做的是在页面加载的时候让框展开，然后再次折叠并停止(而不是自动重复)，这样人们就会看到有隐藏的内容并点击按钮。有人能帮上忙吗？我对jQuery不感兴趣。

这就是我得到的。

        $(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');
                });
            });

任何帮助都将不胜感激。我以为你可以在开始的时候做两个背靠背的滑动切换，但显然不是。

谢谢你们。

Answer 1

试一试：

$(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');
    });
});

它工作的示例：http://jsfiddle.net/ufomammut66/yRqqq/2/

Answer 2

也许是这个？

$(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');
            });
        });