How to show/hide an element using jQuery ?

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:
Create an HTML file in your local system “index.html“Create an HTML element inside the <body> tag for example paragraph <p>, image <img>, etc.Create a button using a <button> tag and attach an event listener to it.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.
Create an HTML file in your local system “index.html“
Create an HTML element inside the <body> tag for example paragraph <p>, image <img>, etc.
Create a button using a <button> tag and attach an event listener to it.
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">    </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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">    </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
Blogathon-2021
CSS-Properties
HTML-Questions
jQuery-Methods
jQuery-Questions
Picked
Blogathon
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Python program to convert XML to Dictionary
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form