GUI Components JavaScript DHTML




Dynamic Content

// 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('');
document.write('');
document.write('');
document.write('');
document.write('');
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 = "";
 }
}


.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}




Dynamic Content



Content1 | Content2 | Content3




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. 



Here only a single <div> tag has been used. The contents of each link is stored in the form of a hidden element.




© Premshree Pillai