Javascript Slide up en down by click doesn't work

**Thew** · Nov 10 '10, 04:45 PM

Hi

Im working on an HTML5 Valid and Javascripted page of my website. For that im using Motionpack.

This is my webpage: http://html5.alphenwee r.nl/ (dutch)

I want if someone clicks on radar, there appears a little radar underneath. But then, if someone clicks on that little radar, underneath all maps there comes a bigger radar.

So this is the code i build:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>AlphenWeer.nl [HTML5] - AlphenWeerOnline - AlphenWeer.nl</title>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
		<script type="text/javascript" src="motionpack.js"></script> 
		<script type="text/javascript">
		function replaceit(v) {
	if(v = "1"){
		slidedown('extra');
		document.getElementById('extrabutton').style.display='inline';
		document.getElementById('extra').innerHtml='<img src="http://html5.alphenweer.nl/html5getimages.php?type=1&image=1"/>';
	}
	else if(v = "2"){
		slidedown('extra');
		document.getElementById('extrabutton').style.display='inline';
		document.getElementById('extra').innerHtml='<img src="http://www.knmi.nl/actueel/images/tempgmt.png"/>';
	}
	else if(v = "3"){
		slidedown('extra');
		document.getElementById('extrabutton').style.display='inline';
		document.getElementById('extra').innerHtml='<img src="http://www.knmi.nl/actueel/images/tempgmt.png"/>';
	}
	else if(v = "4"){
		slidedown('extra');
		document.getElementById('extrabutton').style.display='inline';
		document.getElementById('extra').innerHtml='<img src="http://www.knmi.nl/actueel/images/tempgmt.png"/>';
	}
	else
	{
		document.getElementById('extrabutton').style.display='inline';
		document.getElementById('extra').innerHtml='<p>Fout tijdens selecteren JAVASCRIPT</p>';
	}
}
		function repup(j) {
		slideup(j);
		document.getElementById('extrabutton').style.display='none';
}
		
</script>
		<style type="text/css">
			body {
				font-family: Arial,Helvetica,sans-serif;
				color: black;
				text-align:center; 
				background-color:#99D9EA;
			}
			
			#container {
				background-color:white;
				border:1px solid black;
				width:800px;
				margin: 0 auto;
			}
			
			#center {
				text-align: center;
				margin: 0 auto;
				border:0;
			}
			
			img {
				border:0;
			}
		</style>
	</head>
	<body>
			<div id="container">
				<h1>AlphenWeerOnline [HTML5]<br></h1>
				<table id="center">
					<tr>
						<td>
							<a href="javascript:;" onclick="toggleSlide('radar');" >Radar</a>
						</td>
						<td>
							<a href="javascript:;" onclick="toggleSlide('temperatuur')">Temperatuur</a>
						</td>
						<td>
							<a href="javascript:;" onclick="toggleSlide('satteliet')">Satteliet</a>
						</td>
					</tr>
					<tr>
						<td>
							<div id="radar" style="display:none; height:300px;">
								<p>
									Radar nederland
								</p>
									<a href="javascript:;" onclick="replaceit('1');"><img src="http://html5.alphenweer.nl/html5getimages.php?type=1&amp;image=1" alt="Radar nederland"/></a>
							</div>
						</td>
						<td>
							<div id="temperatuur" style="display:none; height: 300px;">
								<p>
									Temperatuur nederland
								</p>
									<img src="http://www.knmi.nl/actueel/images/tempgmt.png" style="width:256px; height:256px;"/>
							</div>
						</td>
						<td>
							<div id="satteliet" style="display:none; height:300px;">
								<p>
									Satteliet
								</p>
									<img src="http://html5.alphenweer.nl/html5getimages.php?type=1&amp;image=2" style="width:256; height:256px;"/>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<a href="javascript:;" onclick="toggleSlide('alphen-af')">Alphen Afgelopen 2 uur</a>
						</td>
						<td>
							<a href="javascript:;" onclick="toggleSlide('alphen-k2')">Alphen Komende 2 uur</a>
						</td>
						<td>
							<a href="javascript:;" onclick="toggleSlide('wind')">Wind</a>
						</td>
					</tr>
					<tr>
						<td>
							<div id="alphen-af" style="display:none; height:300px;">
								<p>
									Alphen afgelopen 2 uur
								</p>
									<script type="text/javascript" src="af.js"></script>
							</div>
						</td>
						<td>
							<div id="alphen-k2" style="display:none; height:300px;">
								<p>
									Komende 2 uur
								</p>
									<script type="text/javascript" src="k2.js"></script>
							</div>
						</td>
						<td>
							<div id="wind" style="display:none; height:300px;">
								<p>
									Wind
								</p>
									<img src="http://www.knmi.nl/actueel/images/windbftgmt.png" style="width:256px; height:256px;"/>
							</div>
						</td>
					</tr>
				</table>
				<div id="extrabutton" style="display:none;">Close</div>
				<div id="extra" style="display:none;">
			</div>
	</body>
</html>

But this doesn't work. Can y'all help me? Thanks.