1. Home
image

jQuery Tutorial Concepts - From Beginner to Pro

Learn jQuery from scratch! Our tutorial covers basics to advanced concepts. Start learning today!

  • 19
  • 3
right-top-arrow
11. 

Hide and Show in jQuery

Updated on 19/08/2024361 Views
Content

jQuery is a popular JavaScript library that simplifies the process of manipulating HTML and handling events. One common task in web development is to hide or show elements on a webpage dynamically. 

This article will focus on the hide-and-show functionality in jQuery, providing detailed insights into different techniques and methods to achieve this.

Hide and Show in jQuery Overview

Using a variety of techniques, jQuery elements can be hidden or shown. Web developers can manage which elements are visible to users based on their interactions or other events. 

Comprehending these methodologies is imperative for crafting dynamic and participatory online encounters.

How to show/hide an element using jQuery?

There are several approaches to hide and show elements in jQuery. We will explore three commonly used methods: using the show() and hide() methods, the css() method, and the toggle() method.

Approach 1: Using show() and hide() Methods

The show() and hide() methods are straightforward ways to manipulate the visibility of an element using jQuery. The show() method displays the selected element, while the hide() method hides it.

Syntax

To show an element, you can use the show() method as follows:

$(selector).show();

And to hide an element, you can use the hide() method:

$(selector).hide();

Example 

Let's take an example to use show() and hide() methods in jQuery:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Using show() and hide() Methods in jQuery</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <style>    .box {      width: 200px;      height: 200px;      background-color: lightblue;      margin: 20px;      padding: 20px;      display: none; /* Initially hide the box */    }  </style></head><body><h2>Using show() and hide() Methods in jQuery</h2><button id="showBtn">Show Box</button><button id="hideBtn">Hide Box</button><div class="box" id="myBox">  This is a hidden box. Click the buttons to show or hide me.</div><script>  $(document).ready(function(){    $("#showBtn").click(function(){      $("#myBox").show(); // Show the box when the "Show Box" button is clicked    });    $("#hideBtn").click(function(){      $("#myBox").hide(); // Hide the box when the "Hide Box" button is clicked    });  });</script></body></html>

In this example:

  • We include the jQuery library through a CDN link.
  • We define a CSS class called "box" with a display set to "none" to initially hide the box.
  • Two buttons, "Show Box" and "Hide Box", are created.
  • A div with the class "box" is created, initially hidden, and given an id of "myBox".
  • We use jQuery to handle the click events of the buttons and call the show() and hide() methods on the "myBox" element to show and hide it, respectively.

Output:

Approach 2: Using css() Methods

Another approach to hide and show elements in jQuery is by manipulating their CSS properties directly using the css() method. This method allows you to modify any CSS property of an element, including its visibility.

Syntax

The syntax of css() method is as follows:

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

Example 

Below is an example of how to use the css() method in jQuery to hide and show an element:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>jQuery CSS Method Example</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <style>    .hidden {      display: none;    }  </style></head><body>  <button id="hide-btn">Hide Element</button>  <button id="show-btn">Show Element</button>  <div id="element" class="element">This is the element to hide/show</div>  <script>    $(document).ready(function(){      // Hide element when the "Hide Element" button is clicked      $("#hide-btn").click(function(){        $("#element").css("display", "none");      });      // Show element when the "Show Element" button is clicked      $("#show-btn").click(function(){        $("#element").css("display", "block");      });    });  </script></body></html>

  • In this example, the css() method is used to directly modify the display property of the element with the ID "element" to hide or show it based on the button clicks. 
  • When the "Hide Element" button is clicked, the display property is set to "none", hiding the element. 
  • When the "Show Element" button is clicked, the display property is set to "block", showing the element.

Output:

Approach 3: Using toggle() Method

The toggle() method provides a convenient way to toggle the visibility of an element. If the element is hidden, it will be shown, and if it is visible, it will be hidden.

Syntax

To toggle the visibility of an element, you can use the toggle() method as follows:

$(selector).toggle();

Example 

Below is an example of how to use the toggle() method in jQuery to hide and show an element:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>jQuery Toggle Example</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <style>    .toggle-content {      display: none; /* Initially hide the content */    }  </style></head><body>  <h2>Click the button to toggle the content:</h2>  <button id="toggle-btn">Toggle Content</button>  <div class="toggle-content">    <p>This is the content that will be toggled.</p>  </div>  <script>    $(document).ready(function(){      $("#toggle-btn").click(function(){        $(".toggle-content").toggle(); // Toggle the visibility of the content      });    });  </script></body></html>

In this example:

  • We include jQuery library using the script tag.
  • We define a button with the id "toggle-btn" and a div with the class "toggle-content" that contains the content to be toggled.
  • We use the jQuery click() method to bind a function to the button click event.
  • Inside the click event function, we use the toggle() method to toggle the visibility of the ".toggle-content" element when the button is clicked.

Output:

Wrapping up

In this article, we have explored different approaches to hide and show elements in jQuery. We covered the show() and hide() methods, the css() methods, and the toggle() method. Each approach has its own syntax and use cases, allowing you to manipulate the visibility of elements on your web page based on user interactions or certain conditions. By mastering these techniques, you can create dynamic and interactive web pages using jQuery.

FAQs

Q. How to check if an element is shown or hidden in jQuery?
A. In jQuery, you can check if an element is shown or hidden using the :visible and :hidden selectors. For example, you can use $(element).is(":visible") to check if the element is visible, and $(element).is(":hidden") to check if it's hidden.

Q. What does the jQuery show do?
A. The jQuery show() method is used to display selected elements by gradually increasing their opacity and expanding their size.

Q. How to show hidden HTML in jQuery?
A. To show hidden HTML elements using jQuery, you can use the show() method. 

Q. Is it possible to animate the show and hide effects?
A. Yes, the show(), hide(), and toggle() methods allow for specifying a speed parameter to create animated effects.

Q. Can I apply the hide and show methods to multiple elements at once?
A. Absolutely. jQuery selectors allow for targeting multiple elements, enabling the simultaneous manipulation of their visibility.

image

mukesh

mukesh

Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...