Im new to javascript but I found some code on the internet that allows me to display a hidden <div> when a link is clicked on. The <div> disappears when any other part of the page is clicked on. It is similar to google.com's "more" link at the top of the page.
My question is that when I click on the link the div does not disappear. however, when any other part of the page is clicked, it does. How do I make it so that the div disappears when the link is clicked?
Here is my current code:
<html>
<head>
<title>Hover</title>
<style type="text/css">
.dialog {
position:absolute;
padding: 3px;
border: 1px solid gray;
font: 10pt arial;
display: none;
}
</style>
<script type="text/javascript">
function show(cur,element) {
var el = document.getElementById(element);
el.style.left = cur.offsetLeft+"px";
el.style.top = cur.offsetTop+cur.offsetHeight+"px";
el.style.display = "block";
document.onclick = function(e) {
var obj = document.all ? event.srcElement : e.target;
if (obj != el && obj != cur) {
el.style.display = "none";
}
}
}
</script>
</head>
<body>
<a href="#" onClick="show(this,'dlg1'); return false;">Test</a>
<div id="dlg1" class="dialog">
Text to show.
</div>
</body>
</html>