Question

I have some jQuery which i think could be written a lot simpler, I am new to jQuery, I would also like to add a slide in and out animation to the code but not sure how best to do this. Any help would be great.

$(document).ready(function() {
  $('.utilTabFilter').click(function() {
    if($('#sideFilter.smallScreenFilter').css("left")=="0px")
    {
        $('#sideFilter.smallScreenFilter').css("left","-232px");    
        $('.smallScreenFilter .utilFollowFilter').css("display","none");
    }
    else
    {
        $('#sideFilter.smallScreenFilter').css("left","0");
        $('.smallScreenFilter .utilFollowFilter').css("display","block");
    }       
  });
});

Answer 1

Put your style into CSS class:

.myClass { left: -232px }

and toggle it on click. Plus use .toggle() method to toggle visibility:

$('.utilTabFilter').click(function() {
   $('#sideFilter.smallScreenFilter').toggleClass('myClass');
   $('.smallScreenFilter .utilFollowFilter').toggle();
});