Check if an element is Visible/Hidden with jQuery

event.preventDefault() and return false

In jQuery, the :visible selector selects each elements which is currently visible or check whether element is visible or not.

Basically, elements are considered visible when they consume space in a document. So, visible elements have a width or height greater than zero.

Elements with “visibility: hidden” or “opacity: 0” are considered as visible, because they consume space in the document layout.

According to the jQuery documentation, the :visible selector means:

  • They have a CSS none display value.
  • They are form elements with type=”hidden”.
  • Width and height are explicitly set to 0.
  • Ancestor element is hidden, so the element is not shown on the page.
  • Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

Read Also: jQuery :visible – Check for hidden elements in jQuery

Syntax of element is Visible:


For example, you have the following HTML:

<p id="myDiv1" style="display:none;">Div 1</p>
<p id="myDiv2" style="visiblility:hidden;">Div 2</p>

So, you can check with:

console.log($('#myDiv1').is(':visible')); // Returns false
console.log($('#myDiv2').is(':visible'));  // Returns true


if($('#testElement').is(':visible')) {
// Code

Alternatively, you can select visible element by:

$( "div:visible" ).css( "background", "red" );

:visible has had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements.

Leave a Reply

Your email address will not be published. Required fields are marked *