Question

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.

Answer 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/