Home Page DOM Tutorials The display property

The display Property

What we really want is a way to specify that a <div> should not take up any space on the page when it's not being displayed, and the display property will let us do exactly that. We write the HTML for the two separate areas:

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

Then set up our stylesheet as follows:

#picDiv { display: none; }
#specDiv { display: none; }

The none value for the display property tells the browser to completely ignore that division; the page is treated as if the HTML weren't there at all. Thus, neither #picDiv nor #specDiv will take up any space when the browser renders the page.

Now we have to create functions to change the display attributes; these functions will be invoked by the buttons' onClick attribute.

function showPic()
{
    setIdProperty( "specDiv", "display", "none" );
    setIdProperty( "picDiv", "display", "block" );
}

function showSpec()
{
    setIdProperty( "picDiv", "display", "none" );
    setIdProperty( "specDiv", "display", "block" );
}

You already know what none does; we'll explain the block value a little later. The setIdProperty() function comes from the DOM Utilities include file, which was developed in a previous article. Now let's see what it looks like:

Hiding and Showing Information

display values