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

Last Updated : 01 Aug, 2024

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" 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.