JQuery Previous

HTML

<span id="wrapper">
    <span id="prev"><a href="#">Go to Prev</a></span>
    <span id="content">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div id="start" class="box">6</div>
        <div class="box">7</div>
    </span>
    <span id="next"><a href="#">Go to Next</a></span>
</span>

CSS

.box {
    width:30px; 
    height:30px; 
    margin:10px;
    float:left; 
    border:2px blue solid; 
    padding:2px; 
    display:none;
}
  span { font-size:14px; }
#prev {float:left;}
#next {float:left;}
  p { clear:left; margin:10px; }
#wrapper {
width: 570px;
    float:left;
}

#content {
  float: left;
  width: 100px;
}

JavaScript

var $curr = $("#start");
    $curr.css("display", "inline");
    $("#prev a").click(function () {
      $curr = $curr.prev();
      console.log($curr);
      $(".box").css("display", "");
      $curr.css("display", "inline");
    });

    $("#next a").click(function () {
      $curr = $curr.next();
      $(".box").css("display", "");
      $curr.css("display", "inline");
    });