I am trying to make drop down purely using JS. My code is this :
<html>
<head>
<meta charset="utf-8"/>
<style>
.smallImg{
width: 100px;
height: 100px;
border: 1px solid black;
}
#target{
visibility: hidden;
}
</style>
</head>
<body>
<div id="src">
<img class="smallImg" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<div id="target">
<img class="smallImg" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">Target</img>
</div>
</div>
<div>
<p>Hi this is used to get away focus</p>
</div>
<script>
(function(){
var src= document.getElementById('src');
var target =document.getElementById('target');
src.addEventListener('click',function(){target.style.visibility='visible';},false);
target.addEventListener('blur',function(){target.style.visibility='hidden';},false);
})();
</script>
</body>
</html>
On clicking src div my target is set visible, but when I loose focus on it by clicking "Hi this is ...." text , my target div is not hiding.
No error in the console too. What I am doing wrong and how can I do it correctly ?
