How does jQuery Hide and Show work? – AKK Information Technology

jQuery provides two methods for hiding and showing HTML elements: hide() and show(). These methods can be used to dynamically hide or show elements on a web page based on user actions or other events.

The hide() method is used to hide an element, and the show() method is used to make the element visible again. Here’s an example of how to use these methods:

// Hide an element
$("#tempElement").hide();

// Show an element
$("#tempElement").show();

In this example, #tempElement is the selector for the HTML element that we want to hide or show. When the hide() method is called on this element, it will become hidden from view. Similarly, when the show() method is called, the element will become visible again.

Both the hide() and show() methods can take an optional parameter, duration, which specifies the time (in milliseconds) it takes for the element to be hidden or shown. For example, you can use the following code to hide an element with a sliding animation that takes 1500 milliseconds:

$("#tempElement").hide(1500);

You can also use the toggle() method to toggle the visibility of an element, based on its current state. For example, you can use the following code to toggle the visibility of an element when a button is clicked:

$("button").click(function() {
  $("#tempElement").toggle();
});

In this example, the toggle() method is called on #tempElement whenever the button is clicked, which will hide or show the element based on its current visibility state.

Overall, the hide(), show(), and toggle() methods provide an easy way to dynamically hide or show HTML elements on a web page using jQuery, allowing developers to create dynamic and interactive user experiences.