jQuery: How to Test if a div is Visible Programming 17 JUL 2013

jquery-logoThe wonderful jQuery library actually makes it pretty easy for us to test whether or not a div (or pretty much any other element for that matter) is currently visible, by providing us with a ‘:visible’ selector.

Basically elements are considered visible by jQuery if they consume space in the document, meaning that visible elements have a width or height that is greater than zero. Combining this with the .is filter forms the basis for our test.

In practice:

//assuming a div with id "div1"
$('#div1').show();
alert ($('#div1').is(':visible')); //true
$('#div1').hide();
alert ($('#div1').is(':visible')); //false

Nifty. As always, play with around with it yourself in the awesome JSFiddle online JavaScript playground.

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.