How to hide or show div on click in HTML

Question

I have four HTML div I want to show and hide them on click how to do this

            <div id="targetid" class="image_one"><img src="image/imageone.png"/></div>
            <div id ="targetidone "class="image_two"><img src="image/imagetwo.png"/></div>
            <div id="targetidtwo" class="image_one_one"><img src="image/pagetwo_graph_two_11.png"/></div>
            <div id ="targetidfour"class="image_two_two"><img src="image/pagetwo_graph_two_22.png"/></div>

below are those two div on which after click the above image should hide and show

          <div class="option_image"><img src="image/option_1.png"/></div>

          <div class="option_image_one"><img src="image/option_1.png"/></div>

Answer 1

If you don't use any 3rd party javascript (eg: jQuery), then use it:

document.getElementById('target-id').style.display = 'none'; // hide it
document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div)
document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span)

Example (1):

<div id="target-id">hello workd</div> <!-- attribute: id -->
<a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">hide it</a> 
<a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">show it</a>

Example (2):

<div id="targetid" class="image_one" onclick="document.getElementById('targetid').style.display = 'none';"><img src="image/imageone.png"/></div> <!-- adding onclick to hide this element when you click it -->

<div class="option_image" onclick="document.getElementById('targetid').style.display = 'block';"><img src="image/option_1.png"/></div> <!-- adding onclick to show element #targetid when you click this -->

Answer 2

$("buttonid").click(function () {
$("divid").toggle();
});

Buttonid - Id of the button which you will click divid - Id of the div which you need to show/hide

note:include jquery script

Answer 3

As muhhamad alvin has posted, you may want to reverse the way things are displayed. So, tweaking his solution gave me this result:

How it functions?

-Click on Question to show an Answer, click on Answer to hide the Answer (Question is always displayed). So, just replace the Question and Answer with your own divs.

  <a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">Question</a> <div id="target-id" style="display: none;"><a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">Answer</a> </div> <!-- attribute: id --> 

Edit: The thing to note is that for every Question/Answer pair, you will need a different 'target-id'.

Answer 4

you can try this:

$(".image_one").toggle();

the code above grab the element by name of class. if you dont have a class there,you can get by id just like this:

$("#image_one").toggle();

hope this useful