CODEWITHSUNDEEP
jqueryhidetoggleslide
user1562679
user1562679

Reputation: 145

Slide to side with jquery on click and toggle

So i have a site where i need to have a div slide in from side with a click from a button (slide in from left and slide out on right) - and on reclick it should slide out again... So it needs to be hidden from pageload and only become visible once the button is clicked.

I try to make this, but im new to jquery, so if someone could help me proceed, i would appreciate it.

here is a fiddle of how far i am now.

LINK: http://jsfiddle.net/iBertel/zes8a/21/

Jquery:

$('#btn').click(function() {   
$('#div1').slideToggle('slow', function() {  
});
});

HTML:

<div id="div1">Div 1</div>
<div><a href="#" id="btn">Click</a></div>

CSS:

#div1 {
width:100px; height:100px; background-color:#F30; color:#FFF; text-align:center; font-size:30px;

}

Upvotes: 0

Views: 7532

Answers (1)

Arthur Halma
Arthur Halma

Reputation: 4001

$('#btn').click(function() {   
    $('#div1').animate({width:'toggle'},350);
});

http://jsfiddle.net/zes8a/39/

Upvotes: 3

Related Questions