How to Display Image on Button Click Using jQuery

Last Updated on June 5, 2021 by Roshan Parihar

In this tutorial, learn how to display the image on button click using jQuery. The short answer is: use the jQuery show() and hide(). Initially, use the display:none CSS property to hide the image. The show() display the image on button click and hide() hides the image.

You can also use the jQuery toggle() function to perform the show hide effect. It toggle image when click on button for show/hide image effect. For the toggle function method, you have to use only a single button that toggles the image.

Let’s find out to display image on button click using jQuery with the examples given below.

Table of Contents

Display Image on Button Click Using jQuery Show/Hide Function

To display the image on a button click, you have to use the jQuery show/hide function. The show() display the hidden image on button click. Initially, you have to add display:none CSS property to hide the image. Also, you need to use the separate button for the show and hide effects.

Test it Live

<style>
.myimgdivshowhide{
display:none;
}
</style>
<script>
$(document).ready(function(){
$('.showbtn').click(function(){
$('.myimgdivshowhide').show();
});
$('.hidebtn').click(function(){
$('.myimgdivshowhide').hide();
});
});
</script>
<button type="button" class="showbtn">Show Image</button>  
<button type="button" class="hidebtn">Hide Image</button>
<div class="myimgdivshowhide">
<img src="/images/user1.jpg" alt="display image on button click" class="img-responsive img-thumbnail"/>
</div>

<style>

.myimgdivshowhide{

display:none;

}

</style>

$(document).ready(function(){

$('.showbtn').click(function(){

$('.myimgdivshowhide').show();

});

$('.hidebtn').click(function(){

$('.myimgdivshowhide').hide();

});

</script>

<button type="button" class="showbtn">Show Image</button>

<button type="button" class="hidebtn">Hide Image</button>

</div>

Output

Click the below buttons to show hide image.

The above example contains the two buttons for the show and hides the image. The show button displays the hidden image as the image is in a hidden condition initially. If you want to hide the image again, you have to click the hide button given above.

Bonus: download a Free jQuery cheat sheet that will show you 20+ most important examples to learn in jQuery.

Show Hide Image When Click on Button Using jQuery Toggle Function

You can perform the same show and hide image on button click task by using the single button and the jQuery toggle(). This requires less jQuery code and saves some space on your web page.

<style>
.myimgdivtoggle{
display:none;
}
</style>
<script>
$(document).ready(function(){
$('.togglebtn').click(function(){
$('.myimgdivtoggle').toggle();
});
});
</script>

<style>

.myimgdivtoggle{

display:none;

}

</style>

$(document).ready(function(){

$('.togglebtn').click(function(){

$('.myimgdivtoggle').toggle();

});

</script>

<button type="button" class="togglebtn">Toggle Image</button>
<div class="myimgdivtoggle">
<img src="/images/user1.jpg" alt="display image on button click" class="img-responsive img-thumbnail"/>
</div>

<button type="button" class="togglebtn">Toggle Image</button>

</div>

Output

Click the below button to Toggle or Show/Hide image

display image on button click using jQuery

The above example contains the hidden image initially. If you want to display an image on button click, you have to click the above button. Again, if you want to hide the displayed image, you have to click the same button.

FAQS on How jQuery Display Image on Button Click

1. How do you Hide an Image on a Button Click Using jQuery?

Answer: You can use the jQuery hide() to hide the image when click on button. On click event of a button, you have to apply the function to the image to hide it on button click.

The first example given above uses the hide() function to hide the image.

2. How to Show Image When click on Button in jQuery?

Answer: You can use the jQuery show() to show the hidden image on click of a button. When the click event occurs, the function displays the image/

The first example given above uses the show() function to display the image on button click.

3. How to Toggle Image on Button Click Using jQuery?

Answer: To toggle the image on button click, you can use the jQuery toggle() to toggle or show/hide the image on button click. If the image is in a hidden condition, the function displays the image. However, when the image is in visible condition, the function hides the image when click on button.

The second example given above uses the toggle() function to toggle or show/hide the image on button click.

DOWNLOAD Free jQuery CHEAT SHEET

Related Posts

jQuery Tutorial