^title

Basically what is going on is when you click on the input field, it will display the <div> just under it. What would I have to do in order to hide the same <div> as soon as the user starts typing into the input field?

Here is some pretty basic code I'm using. Thanks for taking a look!

HTML Code:
<!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=iso-8859-1" />
<style>
<!--
.note{
	background:#EDEDED;
	border-left:1px solid #A5ACB2;
	border-right:1px solid #A5ACB2;
	border-bottom:1px solid #A5ACB2;
	width:196px; padding:4px;
	font: x-small Verdana, Arial, Helvetica, sans-serif;
	color:#A5ACB2; 
}
-->
</style>

<script type="text/javascript">
<!--
function toggleDiv(DivID, iState) // 1 visible, 0 hidden
{
	if(document.layers)//NN4+
	{
		document.layers[DivID].visibility = iState ? "show" : "hide";
	}
    	else if(document.getElementById)	  //gecko(NN6) + IE 5+
    	{
        	var obj = document.getElementById(DivID);
        	obj.style.visibility = iState ? "visible" : "hidden";
    	}
    	else if(document.all)	// IE 4
    	{
        	document.all[DivID].style.visibility = iState ? "visible" : "hidden";
    	}
}
// -->
</script>
	
<title>Test Document</title>
</head>
<body>

<div><input type="text" class="bginput" name="teamtitle" value="" size="30" maxlength="85" tabindex="1" onClick="toggleDiv('notetag1',1);" /></div>
<div class="note" id="notetag1" style="visibility:hidden;">Start typing a username...</div>

</body>
</html>