How can I call div tag element with another div tag element using onclick function

Question

I'm developing an application with Phonegap framework. I want to know how can I call one div tag element with another tag element using onclick Javascript function.

Here is my code:
I need to display second image onclicking the first image. (With CSS style class names:visible/invisible)

<div id="abc" class="visible">
<img style=" z-index:-1" src="icons/firstimage.jpg" width="100%" height="100%" border="0" alt="logo">
</div>

<div id="def" class="invisible">
<img style=" z-index:-1" src="icons/secondimage.jpg" width="100%" height="100%" border="0" alt="logo" >
</div>

Answer 1

You can call a javascript function on click and add class visible to the second div like below,

document.getElementById('def').className = 'visible';

DEMO HERE

Answer 2

You can just include regular JavaScript, below I'm using jQuery but that was just for my convenience.

<div onClick="$('#OtherDiv').html('you click')">test</div>
<div id="OtherDiv"></div>