Go back to original state on reclick of a button

Question

So i have a few different divs id'ed "sstroke" "pixel" "bstroke" "inside" "textbox" "text" and "piccars". My code is the following :

$(document).ready(function(){
    $("img#buttoncar").click(function(){
        $("div#sstroke").animate({width:168},300,"linear",function(){
            $("div#pixel").animate({width:28},150,"linear",function(){
                $("div#bstroke").animate({width:1000},1300,"linear",function(){
                    $("div#inside").animate({height:450},700);
                    $("div#textbox").animate({height:435},700,function(){
                    $("#text").delay(500).animate({opacity:1},2000);
                    $("#piccars").delay(500).animate({opacity:1},2000);
                    });
                });
            });
        });
    });
});

My aim is to get them to go back to their original state on another click of the "buttoncar" (button that originally unleashes the fury of all those elements deploying) or on the click of another button (that does the same thing with other divs), in the order opposite to how they deployed (i.e. starting with "piccars", then "text", all the way back to "sstroke").

I tried wrinting the same the opposite way, but it just deployed and right after folded back, i tried the .toogle() thingy but it was doing something weird (deploying diagonally instead of horizontally or vertically).

Anyone has a solution? I am very stuck..

Update: here is the jsFiddle : http://jsfiddle.net/TSEJP/

BDdL · Accepted Answer

After a few hours of trying out (i'm not that good..), i found a solution that fits my needs, and that will hopefully help other programmers! Here goes! The trick was to use 4 different scripts (i didn't get to the part of re-clicking the same button and folding everything back upon that action, but still..).

Let's summarize what we have :

2 images we'll use as buttons : "id="b1"" and "id="b2""
6 divs : 3 associated to b1 ("div11" "div12" and "div13"), 3 associated to b2 ("div21" "div22" and ""div23") What we need is for the divs 11, 12 and 13 to "unfold" when b1 is clicked and to refold when b2 is clicked, making the divs 21, 22 and 23 to unfold (and same thing when re-clicking on b1, etc..).

so here we go :

Script 1 : Unfolding when clicking on b1

>$(document).ready(function(){
    $("#b1").click(function(){
        $("#div11").animate({width:100},500,"linear",function(){
            $("#div12").animate({width:150},750,"linear",function(){
                $("#div13").animate({height:200},1000,linear,function(){
                });
            });
        });
    });
    });

Script 2 : Unfolding when clicking on b2

$(document).ready(function(){
    $("#b2").click(function(){
        $("#div21").animate({width:100},500,"linear",function(){
            $("#div22").animate({width:150},750,"linear",function(){
                $("#div23").animate({height:200},1000,linear,function(){
                });
            });
        });
    });
    });

Script 3 : Folding of b2 when clicking on b1 in the order opposite of which they appeared

$(document).ready(function(){
        $("#b2").click(function(){
        $("#div23").animate({width:0},500,"linear",function(){
            $("#div22").animate({width:0},375,"linear",function(){
                $("#div21").animate({height:0},275,linear,function(){
                });
            });
        });
    });
    });

Script 4 : Folding of b1 when clicking on b2 in the order opposite of which they appeared

$(document).ready(function(){
    $("#b1").click(function(){
        $("#div13").animate({width:0},500,"linear",function(){
            $("#div12").animate({width:0},375,"linear",function(){
                $("#div11").animate({height:0},275,linear,function(){
                });
            });
        });
    });
    });

HTML


   
    
    fold-unfold

CSS

#div11 {background:"red";height:100px;width:0px;position:absolute;top:10px;left:100px}
#div12 {background:"red";height:130px;width:0px;position:absolute;top:10px;left:200px}
#div13 {background:"red";height:70px;width:0px;position:absolute;top:10px;left:350px}
#div21 {background:"blue";height:100px;width:0px;position:absolute;top:250px;left:100px}
#div22 {background:"blue";height:130px;width:0px;position:absolute;top:250px;left:200px}
#div23 {background:"blue";height:70px;width:0px;position:absolute;top:250px;left:350px}

And there we go : folding/unfolding 1 click away!
adapt to whatever need (animate the height, the position, etc.) your website requires!

Cheers for those who helped!

Go back to original state on reclick of a button

Answers (2)

Related Questions