On click show div, image

Question

I've made this code to show me a div when I click on a box:

JS

<script type="text/javascript">
var bool = 0;
function showDiv() {
    if (bool == 1) {
        bool = 0;
        document.getElementById('show').style.visibility = "hidden";
    } else if (bool == 0) {
        bool = 1;
        document.getElementById('show').style.visibility = "visible";
    }
}​
</script>

HTML

<input type="button" value="click" onclick="showDiv();" />

<div id="show" style=" visibility:hidden;">
  <p>it is okay it is okay it is okay it is okay it is okay</p>
</div>

But, how do I do this when it's an image I want to click on to show the div.

Answer 1

When you tag your question jquery, then I recommend using .toggle method instead..

$('#yourimageid').click(function() {
   $('#targetelementid').toggle();
});

Answer 2

Easiest way (given what you already have):

<img src="myimage.jpg" onclick="showDiv();"/>

But if you are actually using jQuery, then you could use the .toggle method which means you don't have to bother with maintaining your bool variable (which really ought to actually be a bool!).

With jQuery, you could do something like this:

$('#imageId').click(function() {
    $('show').toggle();
});

Answer 3

Using jQuery you can reduce your code to just this:

$('input,img').click(function() {
    $('#show').css('visibility', ($('#show').css('visibility') == 'visible') ? 'hidden' : 'visible');
});​

jsFiddle example

Answer 4

Do

$('#imageId').click(showDiv);

To bind the showDiv function to the click event on the element whose id is imageId.

Reference : http://api.jquery.com/click/