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>

If you had searched google, you could have found about 1 mil. examples on how to do this. I will vote this question down. — Rob Angelier, Apr 19 '12 at 07:02
@Rob Guess what the first search result is when googling 'html show hide div'... — Cristian Diaconescu, Aug 29 '13 at 12:28
@Rob Yup. It's a bit disconcerting to hit the first result and reach a post with -4 votes. I understand the original downvoting on the sloppy writing and laziness of the OP, but maybe you could reconsider. The post is in fairly good shape now, and together with the answers it provides real value. — Cristian Diaconescu, Aug 30 '13 at 09:12

Muhammad Alvin · Answer 1 · 2012-04-19T07:07:56.200

4

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 -->

edited Apr 19 '12 at 07:07

answered Apr 19 '12 at 06:42

Muhammad Alvin

1,190
9
9

i want that when page load firt two dic should be visible and when i click on button second div should open i have added your code but not working – Jackson J Apr 19 '12 at 06:52
Just adding my code above will not make it works. You need to add id="something" in your target elements (the elements to show/hide). And make sure that it is unique (no other elements have the same id). After that, put the onclick="..." in your trigger elements (the elements that when clicking on it, will show/hide the target elements). And it will be easier when you use 3rd party library, eg jQuery. – Muhammad Alvin Apr 19 '12 at 06:58
See example (2). I've added some onclick from your code. You can extend it for your purpose. – Muhammad Alvin Apr 19 '12 at 07:09

score 3 · Accepted Answer · answered Apr 19 '12 at 06:41

3

$("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

answered Apr 19 '12 at 06:41

Thiliban

74
4

i did not understand can you describe a little bit as my code shown – Jackson J Apr 19 '12 at 06:42
To use an ID in a jQuery selector it needs to be prefixed with a hash: `$("#buttonid")` etc – steveukx Apr 19 '12 at 06:43
I've edited the answer with a link, but here it is again: [jQuery tutorial](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery) – Mario S Apr 19 '12 at 06:44
@steve: prefix is not necessary in all cases. – Thiliban Apr 19 '12 at 06:50
@JacksonJ: Add id tag to your image divs, call a common js function say "togglediv", make it simple by passing the div id which should be shown/hidden as a parameter to the "togglediv" function, Now append the parameter in the code as $(@param).toggle(); – Thiliban Apr 19 '12 at 06:54
1

@Thiliban correct, however omitting the hash would mean selecting based on a tag name and not an ID – steveukx Apr 19 '12 at 06:55

3xCh1_23 · Answer 3 · 2014-10-23T19:06:19.180

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'.

score -1 · Answer 4 · answered Apr 19 '12 at 06:57

-1

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

answered Apr 19 '12 at 06:57

Pangeran Oby

1
2

Author asked to hide ON CLICK, plus - it's worse version of already accepted answer posted more than 15 mins before Yours. – Jarema Oct 23 '14 at 19:13

How to hide or show div on click in HTML

4 Answers4

Linked

Related