Css positioning from JS

Question

 var is_show = false; jQuery(function($) { $(document).ready(function() { $("#Side-Bar.button-slide").click(function() { return runFunction(); }); $("#Side-Bar.button-slide"); }); }); function runFunction() { if (is_show) { is_show = false; $("#Side-Bar.button-slide").toggleClass('active'); $('#Side-Bar').animate({ 'marginLeft': '-120px' }, 800); $('#Side-Bar.button-slide').animate({ 'marginLeft': '0px' }, 800); $('#content').animate({ 'Left': '0px' }, 800); } else { is_show = true; $("#Side-Bar.button-slide").toggleClass("active"); $('#Side-Bar').animate({ 'marginLeft': '0px' }, 500); $('#Side-Bar.button-slide').animate({ 'marginLeft': '120px' }, 500); $('#content').animate({ 'Left': '120px' }, 500); } return false; }; 

 #Side-Bar { left: 0; padding: 0; position: fixed; Top: 40%; Background: #101010; width: 120px; margin-left: -120px; z-index: 500; } #Side-Bar ul { margin: 0; padding: 0; } #Side-Bar ul li { list-style: none; text-align: center; margin: 0 auto; } #Side-Bar ul li a { margin: 0 auto; color: #9d9d9d; text-decoration: none; display: block; padding: 0 20px; text-align: center; line-height: 60px; font-size: 20px; } #Side-Bar ul li a:hover { color: #FFFFFF } #Side-Bar.button-slide { background: #000000; background-size: 10px 15px; position: fixed; width: 10px; height: 15px; margin: 90px 0 0 0; display: block; z-index: 999; } #Side-Bar.active { background: #000000; background-size: 10px 15px; position: fixed; width: 10px; height: 15px; display: block; z-index: 999; } #content { margin: 0 auto; Position: relative; background: #F12355; Height: 900px; Width: 90%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Side-Bar"> <ul> <li><a href="#">Wide</a> </li> <li><a href="#">HD</a> </li> <li><a href="#">Standard</a> </li> </ul> <a href="#" id="Side-Bar" class="button-slide"></a> </div> <div id="content"> </div> 

So, when i click on button of my Side-Bar he going right, i need my content going right too (Changing "Left" position to "120px"), i have it there, but it doesn't work. Where i have error? i think it's syntax error... Help please...

Answer 1

You need a lowercase Left in your animate function.

$('#content').animate({
  'left': '120px'
}, 500);

$('#content').animate({
  'left': '0px'
}, 800);

Demo here .