How to Check an Element is Visible or not using jQuery

You can use .is(':visible') to check whether an element is visible in the layout or not.

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero. The :visible selector selects every element that is currently visible.

 
if($('#yourDiv').is(':visible')){
  //do something
}

Try it Yourself

Hidden Div

Visible Div

Full Source

 
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery .is(':visible')</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#btn1').click(function() {
    alert($('#hiddenDiv').is(':visible'));
    alert($('#visibleDiv').is(':visible'));
  });
});
</script>
<style>
#hiddenDiv {
  display: none;
}
</style>
</head>
<body>
<div id="hiddenDiv">Hidden Div</div>
<div id="visibleDiv">Visible Div</div>
<button id="btn1">Click Me</button>
</body>
</html>

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

The same works with .is(':hidden') to check whether an element is visible in the layout or not.

 
if($('#yourDiv').is(':hidden')){
  //do something
}

Try it Yourself

Hidden Div

Visible Div

Full Source

 
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery .is(':visible')</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#btn1').click(function() {
    alert($('#hiddenDiv').is(':hidden'));
    alert($('#visibleDiv').is(':hidden'));
  });
});
</script>
<style>
#hiddenDiv {
  display: none;
}
</style>
</head>
<body>
<div id="hiddenDiv">Hidden Div</div>
<div id="visibleDiv">Visible Div</div>
<button id="btn1">Click Me</button>
</body>
</html>

Next : What happen if you return false from a jQuery event handler?