Checking if an element is hidden with jQuery – the correct method

by Paul Joyce. Originally posted July 16, 2013

Over the last couple of days I’ve been reviewing code submitted by other programmers for an external project. Two of these developers, who shall remain nameless, were checking whether elements in a form were visible or not. This is quite a common scenario, jQuery is often used to hide, add and remove elements dynamically these days.

They were using the following method, which to give them credit, did work for 99% of their cases:

if( $("form#formID input#inputID").css('display') != 'none' ) {

As mentioned above, this method works most of the time when detecting whether an element has been hidden (display CSS attribue set to none).

Problems with jQuery checking display = none

However, in their situation, they then started hiding and showing different panels within the same form. This is where problems arose.

Checking whether an element has a display value other than none doesn’t mean its visible; if a parent element is set to hidden yet our form element is set to display correctly, the form element will be still hidden thanks to its parent.