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

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.

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.

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).