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

Answer 1

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.