CODEWITHSUNDEEP
jquerytoggle
Peanuts
Peanuts

Reputation: 2681

Toggle animation not working

I'm doing a toggle to show a hidden div, like so:

jQuery('button').click(function(){
    jQuery("#area").slideToggle(function() {
        jQuery("#menu").animate({ "top": "+=423px" }, "slow" );
    });
});

However, I'd like that on the second click, not only the area hides again, but the #menu gets up again to its original position. I'm trying to no avail the following code:

jQuery('button').click(function(){
    jQuery("#area").slideToggle(function() {
        jQuery("#menu").animate({ "top": "+=423px" }, "slow" );
    },
    function() {
        jQuery("#menu").animate({ "top": "-=423px" }, "slow" );
    });
});

...why this won't work? Many thanks for any input,

Upvotes: 2

Views: 292

Answers (1)

adeneo
adeneo

Reputation: 318352

You can use a flag for that, for instance checking if the element is hidden, as the display property is toggled

jQuery('button').click(function(){
    jQuery("#area").slideToggle(function() {
        var updown = $(this).is(':visible') ? '-=' : '+=';
        jQuery("#menu").stop(true, true).animate({ "top": updown + 423 + 'px' }, "slow" );
    });
});

Note that jQuery's slideToggle does not accept two callbacks, only one, there is no built in toggle functionality.

FIDDLE

Upvotes: 1

Related Questions