Dynamic Content: click show and re-click disappear (IE) : Toggle « GUI Components « JavaScript DHTML






  1. JavaScript DHTML
  2. GUI Components
  3. Toggle

Dynamic Content: click show and re-click disappear (IE)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynamic Content</title>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/dynamic_content.htm
//*********************************************
//* Dynamic Content                           *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.com                  *
//* E-mail : premshree@hotmail.com            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************
document.write('<form name="form1">');
document.write('<input type="hidden" name="cont1" value="ONE">');
document.write('<input type="hidden" name="cont2" value="TWO">');
document.write('<input type="hidden" name="cont3" value="THREE">');
document.write('</form>');
function showContent(name)
{
 val = name;
 if(document.all.prem.innerText!=eval('this.document.form1.' + val + '.value'))
 {
  document.all.prem.innerText =  eval('this.document.form1.' + val + '.value');
 }
 else
 {
  document.all.prem.innerText = "";
 }
}
</script>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:10pt; color:#C00000; font-weight:bold; text-decoration:none}
.link:hover{font-family:verdana,arial,helvetica; font-size:10pt; color:#FA5D00; font-weight:bold; text-decoration:underline + overline}
.header{font-family:verdana,arial,helvetica; font-size:25pt; color:#000000; font-weight:bold; text-decoration:none}
.prem{font-family:verdana,arial,helvetica; font-size:10pt; color:#FF0000; font-weight:bold; text-decoration:none}
.premshree{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal; text-decoration:underline}
.premshree:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal; text-decoration:underline}
</style>
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Dynamic Content</span>
<br><br>
<a href="javascript:showContent('cont1');" class="link">Content1</a> | <a href="javascript:showContent('cont2');" class="link">Content2</a> | <a href="javascript:showContent('cont3');" class="link">Content3</a>

<div id="prem" class="prem"></div>
</center>
<table align="center" width="400" cellspacing="5"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#404040">
This JavaScript displays different content for different links. On clicking on the link the content becomes visible and on clicking
on it again it becomes hidden. 
<br><br>
Here only a single &lt;div&gt; tag has been used. The contents of each link is stored in the form of a hidden element.
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.com" class="premshree">&#169 Premshree Pillai</a></center>
</body>

</html>








Related examples in the same category

1.Toggle Multi select Widget
2.Toggle page
3.Create custom page and replace current document with it
4.Toggle web page