Open In App

How to show/hide an element using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to show/hide an element using jQuery. We can do these using jQuery methods like css(), show(), hide(), and toggle() methods.

Approach:

  1. Create an HTML file in your local system “index.html
  2. Create an HTML element inside the <body> tag for example paragraph <p>, image <img>, etc.
  3. Create a button using a <button> tag and attach an event listener to it.
  4. We use this button to toggle the show and hide animation. It means when the selected element is shown and you click the hide button then the code inside your event listener should hide the element that you selected and change the text of that element or vice-versa.

Method 1: Using css() methods – It takes two parameters where the first parameter is the property name and the second parameter is the value of the property.

$(selector).css(property, value);

It takes one parameter type JSON string object and the object contains the properties along with their values.

$(selector).css(property);

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
      
    <style>
        body {
            border: 2px solid green;
            min-height: 240px;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        div {
            display: flex;
            justify-content: center;
        }
  
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <div id="element">
        Hello Geeks Welcome to GeeksforGeeks
    </div>
  
    <div class="button-container">
        <button id="click">
            hide
        </button>
    </div>
  
    <script>
        $('#click').on('click', function () {
            if ($('#click').text() === 'show') {
  
                // This block is executed when
                // you click the show button
                $('#click').text('hide');
                $('#element').css('display', 'flex');
            }
            else {
  
                // This block is executed when
                // you click the hide button
                $('#click').text('show');
                $('#element').css('display', 'none');
            }
        });
    </script>
</body>
  
</html>


 

Output:

output

Method 2: This method is used to show the hidden element and the parameter that it takes are optional.

$(selector).show(optional);

This method is used to hide the visible element and the parameter that it takes are optional.

$(selector).hide(optional);

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <style>
        body {
            border: 2px solid green;
            min-height: 240px;
              text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        div {
            display: flex;
            justify-content: center;
        }
  
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <div id="element">
        Hello Geeks Welcome to GeeksforGeeks
    </div>
      
    <div class="button-container">
        <button id="click">
            hide
        </button>
    </div>
  
    <script>
        $('#click').on('click', function () {
            if ($('#click').text() === 'show') {
  
                // This block is executed when
                // you click the show button
                $('#click').text('hide');
                $('#element').show();
            }
            else {
  
                // This block is executed when
                // you click the hide button
                $('#click').text('show');
                $('#element').hide();
            }
        });
    </script>
</body>
  
</html>


Output:

The output of the show/hide method

Method 3: This method hides the element if it is visible and shows the element if it is hidden. This method can do both functionalities of the show and hide method and the parameter is optional.

$(selector).toggle(optional)

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
      
    <style>
        body {
            border: 2px solid green;
            min-height: 240px;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        div {
            display: flex;
            justify-content: center;
        }
  
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <div id="element">
        Hello Geeks Welcome to GeeksforGeeks
    </div>
  
    <div class="button-container">
        <button id="click">
            hide
        </button>
    </div>
  
    <script>
        $('#click').on('click', function () {
            if ($('#click').text() === 'show') {
  
                // This block is executed when
                // you click the show button
                $('#click').text('hide');
            }
            else {
  
                // This block is executed when
                // you click the hide button
                $('#click').text('show');
            }
            $('#element').toggle();
        });
    </script>
</body>
  
</html>


Output:

the output of toggle method



Last Updated : 18 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads