parent hidden but children still visible (I don't want them visible)!
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.
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.
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).