Slicker Show and Hide using Jquery

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META content=pranavaj@pranavaj.net name=Author>
<title>Untitled Document</title>

<style>
h2 {
	padding:10px;
	font-size:20px;
	color:#243953;
	background-color:#fafafa;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px; /* Rounder Corner */
       -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-bottom:5px;
}
.togglebox {
	background-color:#CCC;
	border: 1px solid #a9a9a9;
	/* Rounder Corner */
	-moz-border-radius: 7px;
        -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	overflow: hidden;
	font-size: 1.2em;
	width: 295px;
	clear: both;
	margin-bottom:10px;
}
.togglebox .content {
	padding: 20px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

	//Hide (Collapse) the containers on load

	$(".togglebox1").hide(); 

	//Slide up and down on hover

	$("h2").click(function(){

		$(this).next(".togglebox1").slideToggle("slow");

	});

});
</script>

</head>

<body>

<h2>Click Here</a></h2>

<div class="togglebox1">

	<div class="block">

		<h3>Content Here</h3>

		<!--Content-->

	</div>

</div>

My Misc Content comes here

</body>

</html>