jQuery :visible selector

The :visible selector in jQuery is used to select every element which is currently visible. It works upon the visible elements. The elements that are consuming space in the document are considered visible elements. The height and width of visible elements are larger than 0.

The elements with CSS properties such as visibility:hidden, and opacity:0 are considered to be visible elements as the elements with corresponding properties consume space in the document although they are not visible to the eye. Elements that are not in the document are considered to be hidden.

This selector works opposite to the :hidden selector. So, the :hidden selector does not select the elements selected by the :visible selector and vice versa.

So, the :visible selector will not select the elements that satisfy any of the below condition -

Form elements with type = "hidden".
Elements whose width and height are set to 0.
Element with display : none.
A hidden parent element that is hiding the child element as well.

Syntax

The commonly used syntax of using the :visible selector is given as follows -

The selector is used without any argument. However, we can use the id, class, or tag name before the selector to select the specific element.

Example

In this example, we are applying the CSS property visibility:hidden to a paragraph element and assigning it a unique id. Using this id, we will check the corresponding element using the :visible selector, whether it is visible or not.

<!DOCTYPE html>
<html>

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function() {
if($("#p1").is(":visible"))
{
alert('The paragraph  with id = "p1" is visible.');
}
});
});
</script>
</head>

<body>
<h1> Welcome to the javaTpoint.com </h1>
<p> It is an example of using the <b> :visible </b> selector. </p>
<p style = "visibility:hidden;" id = "p1"> Hidden paragraph </p>
<p> Click the below button to see the effect. </p>
<button id = "btn"> Click me </button>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -