Home Page DOM Tutorials Hiding and Showing Information Visibility Example Code

Visibility Example Code

The two hidden areas are written like this in the HTML:

<div id="picDiv">
    <img src="brush.jpg" width="119" height="131">
</div>
<div id="specDiv">
    <table border="0">
    <tr> <td align="right">Size:</td> <td> 12 cm x 13.5 cm </td> </tr>
    ...
    </table>
</div>

The stylesheet for the page has these entries to ensure that neither area is visible when the page loads:

#picDiv { visibility: hidden; }
#specDiv { visibility: hidden; }

And the code attached to the buttons looks like this:

<script language="JavaScript" src="domUtils.js">
</script>
<script language="JavaScript">
function showPic()
{
    setIdProperty( "specDiv", "visibility", "hidden" );
    setIdProperty( "picDiv", "visibility", "visible" );
}

function showSpec()
{
    setIdProperty( "picDiv", "visibility", "hidden" );
    setIdProperty( "specDiv", "visibility", "visible" );
}
</script>

Note: the setIdProperty() function comes from the DOM Utilities include file, which was developed in a previous article.

Hiding and Showing Information