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 id="specDiv">
    <table border="0">
    <tr> <td align="right">Size:</td> <td> 12 cm x 13.5 cm </td> </tr>

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:

The “Fur-B-Gone” pet brush is the latest advance in pet grooming. Although it may look like a medieval torture instrument, your pet will love it. Fido and Fluffy will actually look forward to being groomed! Buy one now!

red-handled pet brush

Size: 12 cm x 13.5 cm
Colors: red, blue, green, black
Country of Manufacture:USA
Weight: 200 gm

  Hiding and Showing Information display values