Detect if html parent is hidden

Question

I would like to detect when a specific HTML element on the page becomes hidden. This usually happens due to a parent element (maybe few levels up) becoming hidden. Is there a simple way to detect this. Or do I need to traverse the DOM and check each parent?

Answer 1

$(foo).is(":hidden")

is supposed to be able to figure that out for you in newer jQuery versions.

Answer 2

You can just check if it's :hidden, for example:

$(".selector:hidden").length > 0
//or
$(".selector").is(":hidden")

This works if the parent is hidden, or any parent, or the element directly...as long as the element itself has no dimensions, it's :hidden.

Answer 3

Like this:

http://jsfiddle.net/2EVrM/

HTML:

<div id="test">
    <div id="test1">
    test
    </div>
</div>​

CSS:

#test{
    display:none;
}​

JS:

alert($('#test1').is(":visible"))​

Answer 4

jQuery uses offsetHeight. That works in most browsers. But you can check that without jQuery too.