seatbelt

trying to get this hori scroll to work

by Alexus fox

HTML

<div id="entiresite">
  <div id="container">
    <div id="belt-1" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>

    <div id="belt-2" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>

    <div id="belt-3" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>
    <div id="belt-4" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>

    <div id="belt-5" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>

    <div id="belt-6" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>
    <div id="belt-7" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>

   <div id="belt-8" class="belt">
      <div class="top"></div>
      <div class="bottom">
        <div class="buckle"></div>
      </div>
    </div>

  <div id="belt-9" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>
     <div id="belt-10" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

  <div id="belt-11" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

<!--<div id="belt-12" class="belt">
    <div class="top"></div>
    <div class="bottom">
      <div class="buckle"></div>
    </div>
  </div>

-->
  </div>

CSS

html {
  height: 100%
}


#entiresite {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:white;
}
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px ;
  height: 100%;
 overflow-x:hidden;
  background-color:white;
}

.belt {
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  height: 100%;
  width:50px;
  background-color: transparent;
  position: relative;
}

.top {
  height: 50%;
  background-color: grey;
}

.bottom {
  height: 50%;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
  left: 0;
}

.buckle {
  height: 60px;
  background-color: maroon;
}

#reset {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  width: 50px;
  background-color: pink;
  position: relative;
}

JavaScript

$('.buckle').click(function() {
  $(this).parent().siblings('.top').animate({
    height: 0
  });
});