is it possible to make a child element visible if the parent is hidden

Question

just wondering if its possible to have a hidden parent and a visible child with css or jQuery,

basically on some certain pages I'm trying to make a child element visible even though the parents are hidden,

var bodyClass = jQuery('body').attr('class');
    //alert (bodyClass);
    var searchTerm = 'category-mens';
    var searchTerm2 = 'category-ladies';
    if((bodyClass.search(searchTerm) || bodyClass.search(searchTerm2)) != -1) {
        jQuery('.nav-container ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.first a span').css({
             'display':'block',
             'position':'absolute',
             'top':'500px',
             'left':'500px'
        }); 
    } 

at the moment it doesn't work because the li.level2 is hidden.

Thanks for the help.

Answer 1

Say you have something like:

<div style="visibility:hidden">
     <div style="visibility:visible">
          This is some sample text
     </div>
</div>

You are not going to see the sample text. because if the parent is hidden, the child will be hidden as well even if its expressly declared visible.

Like if Harry Potter is wearing a shirt, and he has on his cloak of invisibilty, even though the shirt may be visible, since its inside the cloak, it still can't be seen.

EDIT:

As it has been pointed out this answer is outdated. At the time it was answered it had been tested and worked under IE and Chrome and it functioned at that time as described above. (I honestly can't even tell you what versions I tested it under at that point in time.

A more recent answer that is valid for current browsers at this point can be found at parent hidden but children still visible As it is pointed out in the target question/answer... you probably don't want visible anyway... display:hidden is most likely going to be the best option, and considering that when you .show()/.hide()/.toggle() it updates the display and not the visibility, it is going to help you remain consistent.

Answer 2

The accepted answer is wrong. The specs clearly state:

The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

Source: http://www.w3.org/wiki/CSS/Properties/visibility

So, yes. You can make a child visible if the parent is hidden, if you use the visibility property. In my eyes this is a wrong behavior - not logical at all. But these are the specs. The display property behaves differently.