Show image in div using onclick and javascript code

Question

I am trying to show an image in div when the same image is clicked in a different div. I have the following code to do that but it is not working. Java Script:

    function showDiv() {
    document.getElementById(this.id).style.display = "show";
    }

HTML Code:

          <div class="row">
            <div class="col-md-4"><a href="#"><img id="1" 
            src="images/gmail.png" onclick="showDiv()"></a></div>
            <div class="col-md-4"><a href="#"><img id="2" 
               src="images/calender.png" onclick="showDiv()"></a></div>
            <div class="col-md-4"><a href="#"><img id="3" 
             src="images/Drive.png" onclick="showDiv()"></a></div>              
            </div>

Please use javascript function only without libraries.

Answer 1

It should be either

document.getElementById(this.id).style.display = "block";

or

document.getElementById(this.id).style.visibility = "visible";

Answer 2

There is no such display='show' in css. You can use display:'block' You can read more about display property here Also you need to pass this to showDiv in order to get id inside function like this onclick="showDiv(this)"

 function showDiv(event) { document.getElementById(event.id).style.display = "block"; } 

 <div class="row"> <div class="col-md-4"><a href="#"><img id="1" src="images/gmail.png" onclick="showDiv(this)"></a></div> <div class="col-md-4"><a href="#"><img id="2" src="images/calender.png" onclick="showDiv(this)"></a></div> <div class="col-md-4"><a href="#"><img id="3" src="images/Drive.png" onclick="showDiv(this)"></a></div> </div>