Basic JS Function to Show/Hide (Toggle) an Element
Posted on November 12, 2008, Filled under JavaScript, 
Bookmark it
This is a simple JS function to show/hide an element. The element is hided by setting its ‘display’ CSS attribute to none. When the element is showed back the ‘display’ attribute is set to block.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>A Basic Show/Hide JavaScript Function</TITLE>
<META NAME="Author" CONTENT="Bit Repository">
<META NAME="Keywords" CONTENT="show, hide, js, function">
<META NAME="Description" CONTENT="A Basic Show/Hide JavaScript Function">
<STYLE TYPE="text/css">
<!--
#info_box {
border: 1px solid green;
padding: 3px;
margin-top: 10px;
-moz-border-radius: 3px;
display: none;
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function toggle(name)
{
var id = document.getElementById(name);
if(id.style.display == '') // Invisible? Show it
{
id.style.display = 'block';
}
else if(id.style.display == 'block') // Visible? Hide it
{
id.style.display = '';
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
Click <a href="JavaScript: toggle('info_box');">here</a> to show/hide the info box.
<div id="info_box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Curabitur at leo. Quisque tempus.</div>
</BODY>
</HTML>
DEMO
Loading ...