Toggle the display of the div when you click on the targeting icon.

Question

I have three icon images in the title. They consist of a camera, a bicycle and a child. I want to hide / show the corresponding images in the body depending on which icon is clicked. The previous image should be hidden when you click the next icon. I would also like the default value on the page to be "hidden".

I also want to click the icon once to show the image, and again to hide again.

CSS

img { margin: 15px; } .camera { display: none; } .bike { display: none; } .baby { display: none; } 

Javascript

 var _hidediv = null; function showdiv(id) { if (_hidediv) _hidediv(); var div = document.getElementById(id); div.style.display = 'block'; _hidediv = function () { div.style.display = 'none'; }; } 

HTML

 <a onclick="showdiv('camera');"> <img src="camera.png" /> </a> <a onclick="showdiv('bike');"> <img src="bike.png" /> <a onclick="showdiv('baby');"> <img src="baby.png" /> <div id="camera" style="display: none;"> <img src="camera1.jpg" /> </div> <div id="bike" style="display: none;"> <img src="bike1.jpg" /> </div> <div id="baby" style="display: none;"> <img src="baby1.jpg" /> </div> 

Answer 1

JsFiddle demo

HTML

 <a onclick="showdiv('camera');"> <img src="http://placehold.it/350x150" /> </a> <a onclick="showdiv('bike');"> <img src="http://placehold.it/350x200" /> </a> <a onclick="showdiv('baby');"> <img src="http://placehold.it/350x300" /> </a> <div id="camera" style="display: none;"> <img src="http://placehold.it/350x150" /> </div> <div id="bike" style="display: none;"> <img src="http://placehold.it/350x200" /> </div> <div id="baby" style="display: none;"> <img src="http://placehold.it/350x300" /> </div> 

Js

 var _hidediv = null; var previousDiv = null; function showdiv(id) { if(_hidediv != null){ _hidediv(); } var div = document.getElementById(id); if(div != previousDiv) { div.style.display = 'block'; _hidediv = function() { div.style.display = 'none'; }; previousDiv = div; } else { previousDiv = null; } } 

CSS

 img { margin: 15px; } .camera { display: none; } .bike { display: none; } .baby { display: none; } 

Description

This seems to suit all your needs.

Answer 2

After some grunts, this is what I finally came up with. Works for good image switching.

 <style type="text/css"> .hidden { display: none; } .unhidden { display: inline; } </style> <style type="text/css"> .hidden { display: none; } .unhidden { display: inline; } </style> <script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden'; } } </script> <a href="javascript:unhide('camera');"> <img src="img/camera.png" /></a> <a href="javascript:unhide('bike');"> <img src="img/bike.png" /></a> <a href="javascript:unhide('baby');"> <img src="img/baby.png" /></a> <div id="camera" class="hidden"> <img src="img/camera1.jpg" /> </div> <div id="bike" class="hidden"> <img src="img/bike1.jpg" /> </div> <div id="baby" class="hidden"> <img src="img/baby1.jpg" /> </div> 

Answer 3

You can simply attach the show show event by clicking the anchor tag. I used jQuery to solve the problem. I did what I linked the click event of the anchor tag and took the href of the tag, which is potentially the identifier of the div element. Then you can just hide and show the div

 $('img').click(function () { var divId = $(this).parent('a').attr('href'); $('div:not(' + divId + ')').hide(); $(divId).show(); }); 

Here you can find the full jsFiddle