title: How to add margin with each click with jQuery?
body: <pre><code>  })
    //NEXT
    $('.social-next a').on('click', function(e){
      e.preventDefault();
      $('.social').animate({marginLeft: '-940px'});
    })
    //PREVIOUS
    $('.social-previous a').on('click', function(e){
      e.preventDefault();
       $('.social').animate({marginLeft: '940px'}, 500);
    })
  </code></pre>
  
  <p>This just fixes the margin value, I need to slide my content on the other hand so by pressing next and prev I need to slide it around, kind of obvious.</p>
  
  <p>Thanks.</p>
  
  <p>edit:</p>
  
  <pre><code>.social {
    width: 2820px;
    overflow: hidden;
  }
  
  .social .slide {
    width: 940px;
    float: left;
    overflow: hidden;
  }
  
  
  .social-previous {
    position: absolute;
    top: 50%;
    left: 0;
  }
  
  .social-next {
    position: absolute;
    top: 50%;
    right: 0;
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>        &lt;div class="social"&gt;
              &lt;div class="intro"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.&lt;a href="#" class="show-slides"&gt;Check it!&lt;/a&gt;&lt;/div&gt;
  
              &lt;div class="slide"&gt;
                  &lt;div class="intro"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.&lt;a href="#" class="open-slides"&gt;&lt;/div&gt;
                  &lt;div class="content"&gt;dolor dolor dolor &lt;a href="#" class="close-slides"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="slide"&gt;
                  &lt;div class="intro"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.&lt;a href="#" class="open-slides"&gt;&lt;/div&gt;
                  &lt;div class="content"&gt;ipsum ipsum ipsum ipsum ipsum&lt;a href="#" class="close-slides"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="slide"&gt;
                  &lt;div class="intro"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.&lt;a href="#" class="open-slides"&gt;&lt;/div&gt;
                  &lt;div class="content"&gt;Lorem Lorem Lorem Lorem Lorem&lt;a href="#" class="close-slides"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt; 
  </code></pre>
  
  <p>It's in other divs as well, but they are not relevant I think.</p>