jQuery slide out or off canvass navigation

Question

I'm trying to create a toggle when the user clicks/taps an icon to slide the #wrapper left 200px and then and then back once its clicked/tapped again. This is the code I am trying to work with:

$('a.navToggle').click(function () {
    $('#wrapper').toggle(function () {
        $('this').animate({
            right: '200px'
        }, 900);
    },
    function () {
        $('this').animate({
            left: '200px'
        }, 900);
    });
});

The problem I'm getting is the #wrapper slides of screen completely and not just 200px

Answer 1

Is that what you want?

$('a.navToggle').click(function () {
    if($("#wrapper").css("left") == "-200px")
    {  
        $("#wrapper").animate({
            left: '0'
        }, 900);
    }
    else{
        $("#wrapper").animate({
            left: '-200px'
        }, 900);
    }
});

Answer 2

.toggle(function(){},function(){}) is Deprecated and Removed in version 1.9

You must using greater version than that.

and using .toggle() means to hide and show alternatively.

Display or hide the matched elements.

That's why your code is hiding element with id wrapper and one click again showing it.

---

It is this not 'this' without quotes.

---

Fiddle Demo

var i = 0,
    wrapper = $('#wrapper');
$('a.navToggle').click(function () {
    if (i++ % 2 == 0) {
        wrapper.removeAttr('style').animate({
            right: '200px'
        }, 900);
    } else {
        wrapper.removeAttr('style').animate({
            left: '200px'
        }, 900);
    }
});