CODEWITHSUNDEEP
jqueryhtmljquery-animate
Nick Bewley
Nick Bewley

Reputation: 9289

animate() on second click

Having difficulty making my javascript act the way I want. I have a button, that when clicked animates 'panel' to expand vertically and 'wrapper' to expand horizontally.

$(document).ready(function(){
$(".btn-slide").click(function(){
        $("#panel").animate({
            opacity: 0.100,
            height: 'toggle',       
            }, 
            1000, function() {
        });         
        $("#wrapper").animate({
            width: 900,         
            }, 
            1000, function() {
            // Animation complete.
        });
});  
});

The problem arises when the button is clicked a second time. The button closes once again, but only vertically. The horizontal width (controlled by #wrapper) does not revert from its clicked state (900px) to its initial state (300px) when it is clicked a second time. How can I get #wrapper to return from 900px to 300px when the button is clicked a second time?

Thanks for any suggestions.

Upvotes: 0

Views: 890

Answers (1)

abhinav
abhinav

Reputation: 3217

Something like this?

 var open = true;
    $(".btn-slide").click(function(){
        if(open){
            $("#panel").animate({
                opacity: 0.100,
                height: 'toggle',       
                }, 
                1000, function() {
            });         
            $("#wrapper").animate({
                width: 900,         
                }, 
                1000, function() {
                // Animation complete.
            });
        open= false;
        }
        else{

            $("#panel").animate({
                opacity: 0.100,
                height: 'toggle',       
                }, 
                1000, function() {
            });         
            $("#wrapper").animate({
                width: 300,         
                }, 
                1000, function() {
                // Animation complete.
            });
            open = true;
        }
    });

Upvotes: 3

Related Questions