Javascript hide show html - using DIV style display property none

How to use CSS display property to hide and show html content in a Web Page ?

JavaScript syntax: object.style.display="inline"
JavaScript syntax: object.style.display="none"
JavaScript syntax: object.style.display="block"

Possible Values

• none - no display at all.
• inline - An inline box.
• block - A block box.
• inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
• run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
• list-item - the equivalent of the default styling of the HTML li element.
• table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
• inline-table - an inline-level table. Not supported by IE.
• table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
• table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
• table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
• table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
• table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
• table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
• table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
• table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.

This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements have well-defined behavior, default 'display' property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. In languages where display behavior is not defined (like XML), the default value is 'inline'.

In addition to the many different allowed display box types, one other value, "none", allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree. This value allows for powerful capabilities, but should be used with caution.

Here is a an working example of display property:
Click on the Register now button and see the results ...

Userid:
Password:
Name:
Email:

Source code for above example:

<script language="JavaScript">
    function setDisplay(id,attribute){
        document.getElementById(id).style.display = attribute;
    }
</script>

<div id="register" style="display: block;">
<input onclick="setDisplay('myform', 'block');setDisplay('register', 'none');" type="button" value="Register Now" />
</div>

<div id="myform"  style="display: none;">
<table>
<tr>
     <td>Userid:</td>
     <td><input name="userid" TYPE="text" SIZE="20" MAXLENGTH="20"></td>
</tr>
<tr>
    <td>Password:</td>
    <td><input name="password" TYPE="password" SIZE="20" MAXLENGTH="20"></td>
</tr>
<tr>
    <td>Name:</td>
    <td><input name="name" TYPE="text" SIZE="30" MAXLENGTH="30"></td>
</tr>
<tr>
    <td>Email:</td>
   <td><input name="email" TYPE="text" SIZE="50" MAXLENGTH="50"></td></tr>
</table>
<input onclick="setDisplay('myform', 'none');setDisplay('register', 'block');" type="button" value="Go Back" />
</div>

Why not use the visibility property to achieve the same results ?

It's fairly easy to confuse the Cascading Style Sheets (CSS) properties display and visibility, because it would seem that they do much the same thing. However, the two properties are in fact quite different.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Here is a an working example of visibility property:
Observe when line1 hides it keep the space the line2 doesn't move up.

This is line No. 1.

This is line No. 2.

Source Code for above example:

<script language="JavaScript">

    function setVisibility(id,attribute){
        document.getElementById(id).style.visibility= attribute;
    }
</script>

<div id="example">
<input onclick="setVisibility('line1', 'hidden');" type="button" value="Hide Line 1" />
<input onclick="setVisibility('line1', 'visible');" type="button" value="Display Line 1" />
</div>

<div id="line1">This is line 1.</div>
<div id="line2">This is line 2.</div>