Toggle css property in jquery?

Question

I have a menu that slides out on clicking the nav-toggle class.

Now I also want the nav-toggle class (the menu icon) to move along 226px from the right, so it moves at the same time as the #navigation menu. Then if clicked again it will collapse the menu (as it currently does) and go back to right:0 position.

See my commenting out in the third last line

jQuery('.nav-toggle').click(function () {
        var $marginLefty = jQuery('#navigation');
        $marginLefty.animate({
            right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
        });
        jQuery('.nav-toggle').animate({
            right: "226px" 
        // How do I make it so if it is at 226px when clicked
        // it should then go to "right: 0", that toggle effect as above
        });
    });

Answer 1

Probably just like you did the #navigation one:

 jQuery('.nav-toggle').animate({
    right: parseInt(jQuery('.nav_toggle').css('right'), 10) == 0 ? "226px" : 0;
 });

Answer 2

Just add a class to check if the nav is expanded/moved or not.

var navbar = $('.nav-toggle');    
if (navbar.hasClass('expanded'))
            {
                $(navbar).animate({'right':'226px'}).removeClass('expanded');
            } else {
                $(navbar).animate({'right':'0px'}).addClass('expanded');
            }

Note these numbers may need flipping.

Answer 3

I think you need to do something like this:

jQuery('.nav-toggle').click(function () {
    var $marginLefty = jQuery('#navigation');
    $marginLefty.animate({
        right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
    });
    if ($('.nav-toggle').css('right') == '0px') {
        $(".nav-toggle").stop().animate({right: '226px'}, 1000);
    } else {
        $(".nav-toggle").stop().animate({right: '0px'}, 1000);
    };
});