click me to see a magical box appear and disapear bellow.

The source:

<!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" xml:lang="en" lang="en">

<head>
	<title>Show/Hide a box in javaScript</title>
	<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	#content {
		border: 1px solid #f00;
		margin: auto;
		width: 1000px;
	}
	.hidden {
		background-color: #fff;
		border: 6px double #f00;
		display: none;
		margin-left: 250px;
		position: absolute;
		width: 500px;
	}
	</style>
	<script type="text/javascript">
		function get(id) {
			return document.getElementById(id);
		}
		function show_hide(id) {
			if (get(id).style.display == "block")
				get(id).style.display = "none";
			else
				get(id).style.display = "block";
		}
	</script>
</head>

<body>
	<div id="content">
		<p>click <a href="javascript:show_hide('the_box')">me</a> to see a magical box appear and disapear bellow.</p>
		<div class="hidden" id="the_box">
			<p>look!</p>
			<p>a hidden box!</p>
			<p>aren't you impressed?</p>
			<p><a href="javascript:show_hide('the_box')">close me</a></p>
		</div>
	</div>
</body>

</html>