The content of any HTML element can be restricted from the user's view in several ways.
The CSS display and visibility attributes control whether the element appears on the screen at all, while the clip and overflow attributes control how much of the content the user can see.
In this section, we focus on display and visibility, as clipping and overflow applies to positioned elements, which are covered in a later section.
Because some browser versions automatically reflows the document when attribute values change, some very powerful functionality can be built with very small amounts of code.
The following example shows how the CSS display attribute can be used to dynamically show or hide content.
By calling a function to handle the onclick event of the element above, this content and the space it occupies can be shown or hidden. The event handler simply sets this element's display property.
Let us explore how that is done.
In that example, we use a heading element for the "clickable" object, and a paragraph for the part that shows and hides. But this can be done on any combination of block elements.
The HTML for the clickable content is as follows:
<h4 style="cursor:hand" onclick="toggleDisp ( 'theObj' )">
... your clickable content here ...
</h4>
On this element, we attach an inline handler to receive control when the element's onclick event occurs. The event handler is assigned a call to a simple function we have defined and named toggleDisp ( ). The function basically turns some other element's display property to either on or off.
This function expects a single parameter, that tells the handler which element on the page we want to toggle. In this case, we pass it the id of the element that we want to hide or show.
The sample above also makes use of the CSS cursor attribute. This allows a Web author to specify what the cursor will look like when it is over an element. In this case, the hand cursor is chosen to indicate that the heading would perform an action when clicked.
The HTML for the content that will appear and disappear is as follows:
<p style="display:none" id="theObj">
... your displayable content here ...
</p>
On this element, we specify an inline style attribute which initially sets the element's display property to none. This way, when the page loads, the browser does not render the element.
When the user clicks on the heading, the heading's onclick event handler triggers our function which sets the paragraph's display property on, and the element's content appears.
When the user clicks again, our function resets the paragraph's display back to none, it disappears and the browser automatically reclaims the space it occupied ( the text beneath shifts up to occupy its space ).
The script for the event handler in the above example is as follows:
<script language="JavaScript">
<!--
function toggleDisp ( id ) {
el = document.all ? document.all [ id ] : document.getElementById ( id );
if ( el.style.display == "none" ) el.style.display = "block";
else el.style.display = "none";
}
//—>
</script>
The first statement in that function is for setting a reference to our object.
The succeeding if ... else structure in the script simply tells the browser to first check if the display == "none" ( the display attribute of the element is set to none ), then display = "block" ( set the display of the element to block ); else, as when clicked again, the function resets the attribute to display = "none".
Note that other style attributes for our paragraph above includes background, padding, and border in the actual code, which are used in formatting our object. Please refer to the appropriate sections on how they are applied.
Of course, the CSS display attribute can be used for other elements as well, such as tables, or images.
Show me
The following shows a more practical example of applying the concepts discussed above. 
Show me