Open Div from Left to Right onClick

Question

I have HTML like:

a#clickme{width:20px; height:20px; background:#444; cursor:pointer;display:block; text-indent:-9999px}
div.mydiv{width:200px; height:200px;border:2px solid #666; position:fixed; left:-200px}

<a id='clickme' href='#'>Click Me</a>
<div class='mydiv'></div>

Now, I want use click on clickme to open mydiv class from left to right. and click again to close it.

How can I use Jquery to do that?

Answer 1

You can animate the 'left' attribute using jQuery:

$('#clickme').click(function() {
    var $slider = $('.mydiv');
    $slider.animate({
       left: parseInt($slider.css('left'),10) == -200 ?
       0 : -200
    });
});

Alternatively, use outerWidth():

$('#clickme').click(function() {
    var $slider = $('.mydiv');
    $slider.animate({
       left: parseInt($slider.css('left'),10) == -$slider.outerWidth() ?
       0 : -$slider.outerWidth()
    });
});

Check out this demo