Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to show/hide an element using jQuery ?

  • Last Updated : 23 Sep, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  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




My Personal Notes arrow_drop_up
Recommended Articles
Page :