Untitled

<!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">
<head>
<title>Hide/Show</title>
<style type="text/css">
	a {
	 text-decoration: none;
	 outline: none;
	}
	div#page {
		margin: 60px auto;
		border: 1px solid #dedede;
		width: 910px;
	}
	.TogWrap {
		width: 400px;
		padding: 22px;
	}
	#togTrigger {
		border: 1px solid #bebebe;
		padding: 7px 8px;
		background: #df7623;
		color: #fff;
	}
	.togContent  {
		margin-top: 9px;
		border: 1px solid #bebebe;
		padding: 16px 10px 10px 10px;
		background: #ededed;
	}
</style>
<script type="text/javascript">
<!-- HIDE FROM OLD BROWSERS
/* <![CDATA[ */

	var oVTog = {
	toggle: function (el) {
			oVTog.container = el.parentNode;
			oVTog.para = oVTog.container.getElementsByTagName('p')[0];
			oVTog.para.style.display = "none";

			el.onmouseover = function () {
						  oVTog.para.style.display = '';
						  return false;
					};
			el.onmouseout = function () {
						  oVTog.para.style.display = 'none';
						  return false;
					};
			el.onclick = function () {
						  oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
						  return false;
					};
			}
	};
	window.onload = function () {
		var l = document.getElementById('togTrigger');
		oVTog.toggle(l);
	};

/* ]]> */
//END HIDING -->
</script>
</head>
<body id="bd">


		<div id="theTog" class="TogWrap">
			<a href="#" id="togTrigger">Lorem ipsum One</a>
			<p class="togContent">
			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna.
			  Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada
			  convallis, sagittis vitae, convallis sit amet, lectus.
			</p>
		</div>

</div>

</body>
</html>