Showing and Hiding Elements in DHTML

JavaScript and the visibility property are used to control the visibilty of an element in a document.

Lagoon Nebula

The code is as shown below.

<HEAD>

<TITLE>Showing and Hiding Elements in DHTML</TITLE>

<SCRIPT LANGUAGE="JavaScript" SRC="../include/browser.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

function toggleVisibility (element)
{
	var dom;

	if (isNS4 || isIE4 || isNew)
	{
		dom = eval (docObj + '.' + element + styleObj);
		state = dom.visibility;
		if (state == "visible" || state == "show")
		{
			dom.visibility = "hidden";
		}
		else
		{
			dom.visibility = "visible";
		}
	}
}

function toggleValue (element)
{
	if (document.select.toggle.value == "Hide")
	{
		document.select.toggle.value = "Show";
	}
	else
	{
		document.select.toggle.value = "Hide";
	}
}

</SCRIPT>

</HEAD>

<BODY>

<A HREF="../dhtmlidx.html">Dynamic HTML Index</A><BR><BR>

<P>JavaScript and the visibility property are used to control the visibilty of an element in a document.</P>

<FORM NAME="select" ACTION="" METHOD="get">
	<DIV ID="image" STYLE="position: relative; visibility: visible; font: bold 18pt/18pt helvetica;">
		<IMG SRC="../graphics/LagoonNebula.jpg" ALT="Lagoon Nebula"> 
	</DIV><BR>
	<INPUT TYPE="button" NAME="toggle" value="Hide" onClick="toggleVisibility('image');toggleValue(document.select.toggle.value);">
</FORM>