jQuery show() method

The jQuery show() method is used to display selected elements that are hidden using CSS. It allows you to make elements visible by removing the “display: none;” style, effectively showing them on the web page.

The syntax for using the show() method is as follows:

$(selector).show();

• selector: It is a string that specifies the elements to be selected.

Here’s an example of how you can use the show() method:

HTML:

<div id="myDiv" style="display: none;">
  <p>This is a hidden paragraph.</p>
</div>

JavaScript:

// Show the div element
$('#myDiv').show();

After executing the above JavaScript code, the div element with the ID “myDiv” will be displayed, and the paragraph inside it will become visible:

Resulting HTML:

<div id="myDiv">
  <p>This is a hidden paragraph.</p>
</div>

In the example, the show() method is used to make the hidden div element visible by removing the “display: none;” style that was applied inline. As a result, the paragraph inside the div becomes visible on the web page.

The show() method is commonly used when you want to toggle the visibility of elements, such as revealing hidden content when a user clicks a button or triggering animations that gradually show an element on the page.

It is essential to note that the show() method only affects elements that were hidden using the “display: none;” CSS property. If an element’s visibility is hidden through other CSS properties, such as “visibility: hidden;” or “opacity: 0;”, the show() method will not work on them. For elements hidden with those properties, you can use the css() method to modify the CSS properties accordingly to show them.