| | | 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 : [email protected] *
//* 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 <div> 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:[email protected]" class="premshree">© Premshree Pillai</a></center>
</body>
</html>
|
|
|
|
| Related examples in the same category |
|