Hello people!

Can you help me improving this code?
The problem is when switching the content , shows the number 1 between contents.


I'm using jquery-1.7.2.min.js and jquery-ui-1.8.20.custom.min.js


general.js


HTML Code:
$(document).ready(
	function() {
		
		var currentHash = location.hash.split("#");
		
		if (currentHash.length > 1) {
			
			var currentHashString = currentHash[1].toString();
			
			$("#navigation li a").removeClass("selected");
										
			$("#navigation li a[href*="+currentHashString+"]").addClass("selected");
			
			var contentCollection = document.getElementsByTagName("li");
			
			for (i=0;i<contentCollection.length;i++) {
				if (contentCollection[i].id) {
					if (contentCollection[i].id === currentHashString || currentHashString === "") {
						
						 $(contentCollection[i]).delay(800).show("slide",{direction: "down"},1000);
					} else {
						
						$(contentCollection[i]).hide("slide",{direction: "down"},600);
					
						if (location.hash !== "#") {
							location.hash = "#"+currentHash[1];
						} // if
					} // else
				} // if
			} // for

		} else {
			var contentCollection = document.getElementsByTagName("li");

			for (i=0;i<contentCollection.length;i++) {
				if (contentCollection[i].id) {
					if (contentCollection[i].id !== "one") {
						
						$(contentCollection[i]).hide("slide",{direction: "down"},600);
						
					}
				} // if
			} // for
		} // else
		
		$("#navigation li a").click(function() {
																
										var myClicked = this.href.split("#");
										
										$("#navigation li a").removeClass("selected");
										
										this.className = "selected";

										var contentCollection = document.getElementsByTagName("li");
										
										for (i=0;i<contentCollection.length;i++) {
											if (contentCollection[i].id) {
												if (contentCollection[i].id === myClicked[1]) {
													
													$(contentCollection[i]).delay(800).show("slide",{direction: "down"},1000);
													
													  } else {
													
													$(contentCollection[i]).hide("slide",{direction: "down"},600);
												
														if (location.hash !== "#") {
															location.hash = "#"+myClicked[1];
														}
														
												  } // else
							  
											} // if
										} // for
										return false;
									} // click func

								); // click event
		} // anon func 1

); // ready





page.html


HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Content Switcher with jQuery as an Enhancement</title>

<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />

<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>-->
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="general.js"></script>

</head>

<body style="width: 98%;">

<div style="width: 625px; margin: 0 auto 0 auto;">

<h1>Adding jQuery to Enhance the Content Switcher</h1>

	<div id="content-slider">
		<ul id="content-slider-inside">
			<li id="one">1</li>
			<li id="two">2</li>
			<li id="three">3</li>
			<li id="four">4</li>
			<li id="five">5</li>
		</ul>
	</div>
	
	<ul id="navigation">
		<li><a href="#one" class="selected">1</a></li>
		<li><a href="#two">2</a></li>
		<li><a href="#three">3</a></li>
		<li><a href="#four">4</a></li>
		<li><a href="#five">5</a></li>
	</ul>

<p>This page uses JavaScript/jQuery to enhance the already-functioning content slider/switcher.</p>

<p><a href="http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html">View the page without JavaScript</a></p>

<p><a href="http://www.impressivewebs.com/javascript-content-switcher-without-javascript/">&lt; Go back to the tutorial</a></p>

</div>

</body>
</html>


screen.css
HTML Code:
* {
	margin: 0;
	padding: 0;
}

img {
	border: none;
}

h1 {
	line-height: 1em;
	font-family: "Times New Roman", Times, serif;
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 30px 0 0 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 8px 0;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 1.5em;
	margin: 0 0 14px 0;
	padding: 30px 0 0 0;
	clear: both;
	text-align: center;
	color: #666;
}

#content-slider {
	width: 650px;
	overflow: hidden;
	height: 300px;
	margin: 30px 0 0 0;
	border: solid 1px #666;
}

#content-slider-inside {
	list-style: none;
	height: 320px;
	overflow: scroll;
	overflow-y: hidden;
}

	#content-slider-inside li {
		width: 650px;
		background: #ccc;
		height: 300px;
		color: #666;
		font-size: 200px;
		font-family: "Times New Roman", Times, serif;
		font-style: italic;
		text-align: center;
		line-height: 300px;
	}
	
#navigation {
	list-style: none;
	margin: 20px 0 0 0;
	float: right;
}

#navigation li {
	float: left;
	width: 30px;
	height: 30px;
	text-align: center;
	margin: 0;
	border: solid 1px #ccc;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 0 5px;
}

#navigation li a, #navigation li a:link, #navigation li a:visited {
	text-decoration: none;
	display: block;
	height: 30px;
	color: #666;
}

#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {
	background: #666;
	color: #fff;
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #666;
	color: #fff;
}