jquery onclick add margin-left

Question

I'm trying something pretty simple in JS but I can't make it work...

I would like when clicking on a div to add a negative margin-left to another div, but I want it to happen every time I click on the div, not just once as it does now. Every time I click on my #next_nav, I would like the #nav to move from -10px. Here it only works one time. Here is my JS:

$(function() {
  $('#next_nav').click(function() {
    $("#nav").css('margin-left', '-10px');
  });
});

and my HTML:

<div id="next_nav"></div>
<div id="nav"></div>

Here is my JSFiddle: http://jsfiddle.net/Beyzd/

Can anybody help me with this?

Answer 1

add an = in front of your value:

$(function() {
    $('#next_nav').click(function() {
       $('#nav').css('margin-left', '-=10px');
    });
});

Working Fiddle

EDIT

If you want to animate it, use animate() method. Here is a fiddle for you.

Answer 2

You can try this

var pixels=0;
$(function() {
    $('#next_nav').click(function () {
       pixels=pixels-10;      
       $( "#nav" ).css('margin-left',pixels);
    });
});

Working fiddle is available here.