I'm trying to a build a horizontal scrolling site, with forward and back arrows (you can view a rough js fiddle here: <http://jsfiddle.net/KcDqu/5/> )

This is the jquery I've got thus far:

```
$(document).ready(function() {
$('a.right-arrow').click(function() {
   $('section').animate({
   marginLeft: "+=920"
   }, "medium");
   });
   $('a.left-arrow').click(function() {
   $('section').animate({
   marginLeft: "-=920"
   }, "medium");
   });
});

```

This works fine thus far. However, there are two things I want to add to this. First, on the initial display, there should be no Left arrow, because there is no content to be viewed to the left, and I don't want users just scrolling into white space.

Second, I want the right arrow to be hidden, when there is no more content to be displayed to the right for the same reason.

Can't seem to figure out the best way to do this...

Any help would be much appreciated.