Ask Ben: Iterating Over An Array In jQuery, One Index Per Click 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery Data Demo With Iterative Click</title>
 
	<script type="text/javascript" src="jquery-1.3.1.pack.js"></script>
	<script type="text/javascript">
 
		// When the document loads, initialize the button.
		$(
			function(){
				var jButton = $( "button" );
 
				// First, hide all the list items.
				$( "li" ).hide();
 
				// Now, we are going to bind data to the button.
				// This data will include the array of jQuery
				// elements that we want to show and the index of
				// the currently selected item.
				jButton.data(
					"config",
					{
						Index: 0,
						Collection: $( "li" )
					}
					);
 
				// Now that we have our data bound, let's bind
				// the click event.
				jButton.click(
					function( objEvent ){
						var jThis = $( this );
 
						// Get the config data out of the button.
						var objConfig = jThis.data( "config" );
 
						// Check to see if our index it out of
						// bounds (more items to click).
						if (objConfig.Index < objConfig.Collection.length){
 
							// Show the current item. When we are
							// doing this, post-increment the our
							// item index.
							$( objConfig.Collection[ objConfig.Index++ ] ).slideDown();
 
						}
 
						// Prevent default event (form submit).
						objEvent.preventDefault();
						return( false );
					}
					);
			}
			);
 
	</script>
</head>
<body>
 
	<h1>
		jQuery Data Demo With Iterative Click
	</h1>
 
	<form>
		<button>Show List Item</button>
	</form>
 
	<ul>
		<li>
			I am list item One.
		</li>
		<li>
			I am list item Two.
		</li>
		<li>
			I am list item Three.
		</li>
	</ul>
 
</body>
</html>

For Cut-and-Paste