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
        });
    });

Could you include the relevant html aswell? :) EDIT: or a fiddle.. that'll work too.. ;) — Peter Rasmussen
– Peter Rasmussen, Commented Sep 27, 2013 at 5:56

mavrosxristoforos · Accepted Answer · 2013-09-27 05:56:46Z

4

Probably just like you did the #navigation one:

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

answered Sep 27, 2013 at 5:56

mavrosxristoforos

3,6833 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chase Over a year ago

Much cleaner than what I was going to put. +1

DT.DTDG Over a year ago

The page isn't loading now :) I'll paste the code here..

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

DT.DTDG Over a year ago

My fault, sorry an extra ;

mavrosxristoforos Over a year ago

No problem. Glad you found it.

DT.DTDG Over a year ago

Thanks @mavrosxristoforos, much apprciated!

Thomas Wood · Accepted Answer · 2013-09-27 06:16:57Z

0

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.

edited Sep 27, 2013 at 6:16

answered Sep 27, 2013 at 5:58

Thomas Wood

8198 silver badges12 bronze badges

1 Comment

Thomas Wood Over a year ago

Try again possibly, and try flipping the 226px and the 0px; or make it 'marginLeft'. Otherwise i'm not sure sorry.

Naveed Butt · Accepted Answer · 2013-09-27 06:20:38Z

0

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);
    };
});

edited Sep 27, 2013 at 6:20

answered Sep 27, 2013 at 5:58

Naveed Butt

2,9197 gold badges33 silver badges58 bronze badges

1 Comment

DT.DTDG Over a year ago

Thanks. The thing is, I want to encapsulate that within the on click function. So if the user clicks on nav-toggle it will not only bring in/out the nav div, but also animate the nav-toggle position. I can't use a button toggle because I'm already using an on click and want to integrate with that.

Collectives™ on Stack Overflow

Toggle css property in jquery?

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related