CODEWITHSUNDEEP
jquery
CallumVass
CallumVass

Reputation: 11458

JQuery slideDown doesn't work when first clicked

When I use slideDown my box just appears and doesn't slideDown when I first click on the link, but every subsequent click, it works as intended:

http://jsfiddle.net/3Gc6Q/

Upvotes: 0

Views: 2453

Answers (4)

mgraph
mgraph

Reputation: 15338

box.removeClass("hide"); must be after slideDown complete demo : http://jsfiddle.net/3Gc6Q/9/ :

$(".link").click(function(e) {

    e.preventDefault();
    var box = $("#test");

    if (box.hasClass("hide")) {

        box.slideDown(function(){box.removeClass("hide");});
    }
    else {
        box.slideUp(function() {

            box.addClass("hide");

        });

    }


});

Upvotes: 3

Johan
Johan

Reputation: 35213

Fixed: http://jsfiddle.net/3Gc6Q/8/

Upvotes: 0

sje397
sje397

Reputation: 41862

Just remove 

box.removeClass("hide");

The call to slideDown will make the div visible. Currently, when you remove the 'hide' class, it will show (since it is being hidden by the css for that class) and the slideDown call then does nothing. If you don't remove the class, it will be shown as you want.

Alternatively, you can remove the class when the animation is complete:

box.slideDown(function() {
  box.removeClass("hide");
});

Upvotes: 0

arb
arb

Reputation: 7863

Try using slideToggle()

$(".link").click(function(e) {

    e.preventDefault();
    var box = $("#test");

    box.slideToggle('slow');
});​

This will drastically simplify what you've got there. It will also allow you to remove some of the unnecessary CSS you've got on on the "test" div.

Here is a working example: http://jsfiddle.net/zYAcB/1/

Upvotes: 0

Related Questions