parent hidden but children still visible (I don't want them visible)!

Question

Okay, so I had a situation where I needed to add some cloned DOM elements to a parent DIV element in a web page.

I had four of these parent DIV holders. When I make their visibility switch from visible to hidden, a really weird things happens: ALL of the post page-load added children REMAIN visible!

Here is a link to download the source code: http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

and here is a link to view the phenomenon first-hand: http://www.clarencebowman.com/parent-child-visibility

What you will see is a red box with some magenta child elements added to it, post page-load. There is a show/hide button at the bottom of the page.

I added a green stripe in the parent DIV to show that its child elements do indeed inherit its visibility properly.

But after you add the cloned child elements and then hide the parent DIV, NONE of the cloned child elements disappears!

I have already tried placing the child to be cloned inside the parent DIV before running the duplicating script... it makes no difference.

Any child elements that are added post page-load seem to have somehow lost their inheritance link with the parent DIV element (the red box).....

Anyone else experience this? Is there a simple way to repair/replace/re-assign the children's inheritance?

I am using jQuery 1.5.

Answer 1

Many others have mentioned to just use display: none but as you know this has an entirely different behavior than using the visibility property.

One thing you can do is to use hidden / inherit instead of hidden / visible. inherit will cause an element to be visible by default, unless one of its parents is not. Which is what you want.

Answer 2

You're not using display: none on the parent (which would affect the children), you're using visibility: hidden on the parent, and within the children have a visibility: visible css attribute. If you want the children to hide, either set them to be visibility: hidden too, or use display: none on the parent element.

So, as Kyle pointed out, you can use $('#parent_div').toggle();, which will easily apply a display: none to #parent_div.

I'll just add that visibility and display are not the same. For example, if an element is width: 10px, height: 10px, visibility retains the element's dimensional space (it still takes up width: 10px, height: 10px), whereas display: none completely removes the dimensions of the element from the parent element (width: 0, height: 0). Visibility means it's still represented visually on flow in relation to other affected elements, it's just not seen; display means it's not seen nor represented on the screen in relation to other displayed/visible elements.

Answer 3

In some cases you can't use the two solutions suggested here.

E.g. display: none won't work because the element needs to know its width and height when it's rendered while being hidden. visibility: hidden might not work if you don't have control of the children and can't add visiblity:inherit to them.

In those cases you could add opacity: 0 with e.g z-index:-1 to have elements visually hidden (just remember they'll still be there and be clickable etc).