jQuery Effects: Hide/Show Image

jQuery toggle() method

The jQuery toggle() method toggles between hide() and show() for the selected elements.

 
$('#btn1').on("click",function(e){
 $('#myImg').toggle('slow');
});

 
<img src="myImg.jpg" alt="Show/Hide Image" id="myImg"/>

Try it Yourself

Full Source

 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show/Hide image with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#btn1').on("click",function(e){
   $('#myImg').toggle('slow');
  });
});
</script>
</head>
<body>
  <img src="myImg.jpg" alt="Show/Hide Image" id="myImg"/>
  <button type="button" id="btn1">Show/Hide Image</button>
</body>
</html>

Note:

.toggle() : This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9 . jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

jQuery hide() and show()

With jQuery , you can hide and show HTML elements with the hide() and show() methods:

 
$('#btn1').click(function(){
    $('#imgDiv').show();
});
  $('#btn2').click(function(){
    $('#imgDiv').hide();
});

 
<div id="imgDiv">
	<img src="myImg.jpg" alt="Show/Hide Image" />
</div>

Try it Yourself

Full Source

 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show/Hide image with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#btn1').click(function(){
   		$('#imgDiv').show();
	});
  	$('#btn2').click(function(){
   		$('#imgDiv').hide();
	});
});
</script>
</head>
<body>
<div id="imgDiv">
	<img src="myImg.jpg" alt="Show/Hide Image" />
</div>
<button type="button" id="btn1">Show</button>
<button type="button" id="btn2">Hide</button>
</body>
</html>

Next : Difference Between Prop and Attr in jQuery