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

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.

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.

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.

It's possible to do this, but it'll require that you set the positioning of the element to absolute. It might require some more tweaking using display types. If you can provide a sample I might be able to help you out more.

Yes, you can show child element, even if the parent element is hidden, if you use "visibility"-attribute (this doesn't work with "display"-attribute though). The problem is that when the value of the "visibility"-attribute is "hidden", the element still takes the same space as it would when it was "visible". You can set the height of the "hidden" elements to 0, but positioning of child elements becomes then a problem. If you hide parent element and set the height to 0, you have to hide all parent siblings as well

HTML:

<ul>
    <li class="hide">Item 1</li>
    <li class="hide">
        Item 2
        <ul>
            <li class="show">Item 2.1</li>
            <li class="show">Item 2.2
                <ul>
                    <li class="hide">Item 2.2.1</li>
                    <li class="show">Item 2.2.2</li>
                    <li class="hide">Item 2.2.3</li>                     
                </ul>
            </li>
            <li class="show">Item 2.3</li>        
        </ul>
    </li>
    <li class="hide">Item 3</li>
</ul>

CSS:

.hide {visibility: hidden; height: 0}
.show {visibility: visible; }

The positioning problem is seen in below example:

http://jsfiddle.net/DWwZg/2/