How to Check if an element is Visible or not in jQuery

How to Check if an element is Visible or not in jQuery, Some situations, we need to test whether the element is visible or not. Based on the visibility, the next functionality and code will work. So we need to test the code before writing another function. Lets look at the functions which are useful to check the visibility of an element.

There are several ways you can test it, here i am going to discuss few things.

1.  is and Visible :

$(element).is(":visible")

This is my favourite one always, because, its simple to go and using is()  function is good to remember and write the functions. When you want to check a single element you can use this function to check whether the feature is visible or not. Example, :

var kv_isVisible = $('#kvcodes_submit_btn').is(':visible');

The above function will check the visiblity of #kvcodes_submit_btn and store in kv_isVisible variable,

2. hidden check :

This function describes you to check the hidden elements , The following example of codes helps you to identify it,

$('element:hidden')

here, if you have more than 2 same element, example, textbox, and during the coding, you may hide either one, so that moment, the function helps you to find the hidden one, not only the single element, if you hide more than one element, that will also hooked into it. Alternatively, you can detect the visible one with the help of following function,

$('element:visible')

so, you can get the visible elements only. Another method is

$(element).css('display') == 'none'

This will check the display property of an element and return the elements, if it is disabled.