Hi guys,
I have a top 10 list (Top 10 Reasons To Go To College), that I want to display in a div, but I only want one div(reason) to show at a time. The container will show #1 as default, and to display each div/reason, the user needs to click the right-arrow button to cycle through them....he/she should be able to go back and forth, using the left and right arrows.
I need a little help with the javascript to make this happen.

Here is my html to give an idea on what I'm looking for...thanks so much.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#topReasons {
	height: 76px;
	width: 644px;
	border: 1px solid #e9e9e9;
	float: left;
	margin-top: 20px;
	background-color: #f4f4f4;
}
#topReasons_bkgrd {
	background-color: #e9e9e9;
	float: left;
	height: 27px;
	width: 635px;
	padding-top: 9px;
	padding-left: 9px;
}
#topReasons_header {
	font-size: 16px;
	font-weight: bold;
	color: #d8151b;
	float: left;
	height: 21px;
	width: 370px;
}
#topArrow_B {
	float: left;
	height: 21px;
	width: 22px;
	margin-left: 200px;
}
#topArrow_F {
	float: left;
	height: 21px;
	width: 22px;
	padding-left: 10px;
}
.reasons {
	float: left;
	height: 30px;
	margin-top: 10px;
	margin-left: 10px;
	width: 600px;
	display: none;
}
</style>
<div id="topReasons">
      <div id="topReasons_bkgrd">
      	<div id="topReasons_header">Top 10 Reasons You Should Go to College</div>
      	<div id="topArrow_B"><img src="imgs/img_arrowleft.jpg" width="22" height="17" /></div>
      	<div id="topArrow_F"><img src="imgs/img_arrowright.jpg" width="22" height="17" /></div>
      </div>
   	  <div class="reasons" style="display: block;">1. Reason 1</div>
      <div class="reasons">2. Reason 2</div>
      <div class="reasons">3. Reason 3</div>
      <div class="reasons">4. Reason 4</div>
      <div class="reasons">5. Reason 5</div>
      <div class="reasons">6. Reason 6</div>
      <div class="reasons">7. Reason 7</div>
      <div class="reasons">8. Reason 8</div>
      <div class="reasons">9. Reason 9</div>
      <div class="reasons">10. Reason 10</div>
    </div>        
  </div> 
</html>