Hide / show image in jquery

Question

How to show / hide the image when clicking on the hyperlink?

<script> function getresource(id) { if(id==4) { //show image } else if(id==5) { //hide image } } </script> <a href="#" onclick="javascript:getresource('4');">Bandwidth</a> <a href="#" onclick="javascript:getresource('5');">Upload</a> <p align="center"> <img id="img3" src="/media/img/close.png" style="visibility: hidden;" /> <img id="img4" src="/media/img/close.png" style="visibility: hidden;" /> </p> 

Answer 1

What image do you want to hide? Assuming all images should work:

 $("img").hide(); 

Otherwise, using selectors, you can find all the images that are children of the containing div and hide them.

However, I highly recommend that you read the jQuery docs, you could understand yourself: http://docs.jquery.com/Main_Page

Answer 2

Use the .css() jQuery manipulators , or better yet, just call .show() / .hide() on the image after you get a handle to it (for example, $('#img' + id) ).

By the way, you should not write javascript handlers with the prefix "javascript:".

Answer 3

With image class name:

 $('.img_class').hide(); // to hide image $('.img_class').show(); // to show image 

With Image ID:

 $('#img_id').hide(); // to hide image $('#img_id').show(); // to show image 

Answer 4

I needed to do something similar now. I finished:

 function newWaitImg(id) { var img = { "id" : id, "state" : "on", "hide" : function () { $(this.id).hide(); this.state = "off"; }, "show" : function () { $(this.id).show(); this.state = "on"; }, "toggle" : function () { if (this.state == "on") { this.hide(); } else { this.show(); } } }; }; . . . var waitImg = newWaitImg("#myImg"); . . . waitImg.hide(); / waitImg.show(); / waitImg.toggle(); 

Answer 5

 <script> function show_image(id) { if(id =='band') { $("#upload").hide(); $("#bandwith").show(); } else if(id =='up') { $("#upload").show(); $("#bandwith").hide(); } } </script> <a href="#" onclick="javascript:show_image('bandwidth');">Bandwidth</a> <a href="#" onclick="javascript:show_image('upload');">Upload</a> <img src="img/im.png" id="band" style="visibility: hidden;" /> <img src="img/im1.png" id="up" style="visibility: hidden;" /> 

Answer 6

I know this is an older article, but may be useful for those who want to display an image on the server side of .NET using jQuery.

You should use slightly different logic.

So $ ("# <% = myServerimg.ClientID%>"). show () will not work if you hid the image using myServerimg.visible = false.

Instead, use the following server-side command:

 myServerimg.Style.Add("display", "none") 

Answer 7

If you try to hide img loading and show img bandwidth by click width and vice versa, this will work

 <script> function show_img(id) { if(id=='bandwidth') { $("#upload").hide(); $("#bandwith").show(); } else if(id=='upload') { $("#upload").show(); $("#bandwith").hide(); } return false; } </script> <a href="#" onclick="javascript:show_img('bandwidth');">Bandwidth</a> <a href="#" onclick="javascript:show_img('upload');">Upload</a> <p align="center"> <img src="/media/img/close.png" style="visibility: hidden;" id="bandwidth"/> <img src="/media/img/close.png" style="visibility: hidden;" id="upload"/> </p>