How to hide/show an image on button click using jQuery ? - GeeksforGeeks

01 Aug, 2021
In this article, we will see how we can hide or show any particular image in jQuery when a button gets clicked. This is quite easy to do with some lines of jQuery code. Before we jump to the topic, let’s know which methods of jQuery will be used for this. So there is a method called show() and another one is hide(), these two methods of jQuery can make our work a lot easier.
For this tutorial, we will use the CDN link of jQuery in order to use it. We have to paste the following code into our HTML page inside the head tag. This script can be found on the official website of jQuery.
jQuery CDN link:
<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>
Now let’s see what will be the jQuery code for the functionality that we are going to implement in our page.
HTML
<script>    $(document).ready(function () {        $("#image").hide();        $("#hide").attr('disabled', true);        $("#hide").click(function () {            $("#image").hide();            $("#hide").attr('disabled', true);            $("#show").attr('disabled', false);          });        $("#show").click(function () {            $("#image").show();            $("#hide").attr('disabled', false);            $("#show").attr('disabled', true);        });    });</script>
The code written above will be responsible for hiding or showing the image on our webpage. We have used a click() method which will be called when the button of id(hide) will be clicked and another click() method will be called when another button of id(show) will be click. In both the click() methods there are two other methods are being used that are hide and show which are linked with the image tag of id(image). So that this image can be altered on the button click. We have added some more functionality to the buttons so that when the image will be visible, at that time show button will be grayed out and when the image will not be visible at that time hide button will be grayed out, this will give some more clarity to the user.
Now for the clear view let’s have a look at our HTML page with complete code.
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>      <!-- CDN link of jQuery -->    <script src=    "https://code.jquery.com/jquery-3.6.0.min.js"        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="         crossorigin="anonymous">    </script></head>  <body>      <!-- Both buttons that will hide        or show the image -->    <button id="show">Show image</button>    <button id="hide">Hide image</button>      <!-- Image that will follow the         commands accordingly -->    <img id="image" src="gfglogo.png"        alt="Photo">      <!-- Code for hiding or showing image         on button click -->    <script>        $(document).ready(function () {            $("#image").hide();            $("#hide").attr('disabled', true);            $("#hide").click(function () {                $("#image").hide();                $("#hide").attr('disabled', true);                $("#show").attr('disabled', false);              });            $("#show").click(function () {                $("#image").show();                $("#hide").attr('disabled', false);                $("#show").attr('disabled', true);            });        });    </script></body>  </html>
Now to check the above code, we have to open that HTML file in our browser and see the functionality of the buttons working that we have implemented.
Output:
jQuery-Methods
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
Difference Between JavaScript and jQuery
How to get the value in an input text box using jQuery ?
QR Code Generator using HTML, CSS and jQuery
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?