Last Updated: May 12, 2016
·
1.319K
· kevin

Check visibility of HTML element which has display:block using jQuery

Example of HTML element:

<div id='dropdown_menu'>
 /*some HTML are here*/
</div>

Example of CSS applied for HTML element:

#dropdown_menu{
 display:block;
 visibility:hidden;
}

To check visibilility of dropdown_menu element using jQUery:

$('#dropdown_menu').is(':hidden') #not work, will return false.
$('#dropdown_menu').css('visibility') === 'hidden' #works, will return true

As you can see, HTML element with visibility:hidden, will not be shown on browser (which means it's hidden).

However, since it has display:block CSS property, checking with is(':hidden') will return false. It's considered as hidden element.