CODEWITHSUNDEEP
javascriptjqueryhtml
quapka
quapka

Reputation: 2929

Slide (toggle) divs to one side

I have created similar layout to the one I am trying to achieve on my webpage. Please look at this fiddle. I would like to slide(toggle) to the left all the <div class="slide"></div> by clicking on <div class="clickMe"></div>. I have seen a lot of similar question, but so far I have not been succesful.

Edit. My question is probably misleading. I am looking for something like jQuery functions slideUp(), slideDown(), slideToggle() but such that the content would slide sideways e.g. slideLeft(). So far I have found, that nothing like that exists.

Update So I have come to this.

Upvotes: 2

Views: 711

Answers (2)

SaidbakR
SaidbakR

Reputation: 13534

I advice you to set global variable that hold state to be able to show .slide again as follows:

state = true;
$('.clickMe').click(function(){
    if (state){    
    $( ".slide" ).animate({ "left": "-=500px" }, "slow" );
        state = false;
    }
    else{
        $( ".slide" ).animate({ "left": "" }, "slow" );
        state = true;
    }

});

Checkout this DEMO

Upvotes: 1

Deryck
Deryck

Reputation: 7658

Add this to .slide { }

position: relative;

Upvotes: 3

Related Questions