Auto-hide Visible Child Elements

Question

I am doing some prototyping using HTML, JavaScript and CSS. The prototype is for an application suite to run on a mobile device. Each screen is built in it's own DIV. There is one home screen, several screens off that, et cetera.

The user should be able to dump out to the home screen at any time. There are certain elements in each screen that are visible by default, and other elements that are specifically made visible, based off certain actions.

The issue I am having is that when setting one of the screen DIVs to hidden, I can still see the child elements of that DIV that I have specifically made visible. I understand there is pre-existing code which hides all child elements of a target DIV, but I only want to hide the one's I've made visible.

Is there code out there which will help me with this? I can conceptualize a way I could program around this, but I don't want to reinvent the wheel.

Sample HTML:

<div id="parentDiv">
  <span id="childElement" style="visibility:hidden"></span>
</div>

Sample JavaScript:

$('childElement').style.visibility = 'visible';
$('parentDiv').style.visibility = 'hidden';

After doing this sample, I can still see childElement.

Note: using Opera on Windows XP

Answer 1

try using

$('parentDiv').style.display = "none";

then to make it visible

$('parentDiv').style.display = "block"