How to check an element is visible or not using jQuery

Answer: Use the jQuery :visible Selector

To check if an element is  :visible  or not, you can use the jQuery:visible selector. This selector will also select elements with  visibility: hidden; or  opacity: 0;, because they preserve space in a layout even though they aren’t visible to the eye.

Let’s look at an example to see how this selector works.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery Test If an Element is Visible</title>
<script src=""></script>
        // show hide paragraph on button click
        $("p").toggle("slow", function(){
            // check paragraph once toggle effect is completed
                alert("The paragraph  is visible.");
            } else{
                alert("The paragraph  is hidden.");
    <button type="button">Toggle Paragraph Display</button>
    <p style="display: none;">Lorem ipsum dolor sit amet adipi elit...</p>