hide div when clicking elsewhere

[turpentyne]

I have a database generated list of images and hidden divs. When the user clicks on an image, the hidden div with that database-generated id appears. Simple enough. But I can't figure out how to make that div disappear when they click elsewhere.

 

 

I've got this, so far, but the Function to hide the div doesn't seem to be doing anything.

 

 

<script type="text/javascript">
var shownDiv;
var parDiv;

function showdiv(id,el){
document.getElementById(id).style.display = "block";
shownDiv=id;
parDiv=el.id;
}

function hideDiv(e){

var target=e?e.target:event.srcElement;
if(shownDiv&&target.id!=parDiv){
document.getElementById(shownDiv).style.display = "none";
}
}


document.onclick=hideDiv;

</script>

<!-- php code is here, and it generates each image in code like this. The first line shows where the showdiv is activated -->
<a class'hide' href="#%4\$s" target="_self" onclick="showdiv('%4\$s',this);" ><img src="%3\$s" style="border: solid 0px #000000;max-width:150px;"></a></div>

<!-- this is the hidden div -->
<div id="%4\$s" style="display:none;width:700px;z-index:109;height:0px;overflow:visible;color:#000;overflow:visible;scrollbar:none;">
data here: %4\$s
</div>