Last Updated: May 12, 2016
· kevin

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

Example of HTML element:

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

Example of CSS applied for HTML element:


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.