Hide and Reveal Content, On Demand — iFrame Example

An IFRAME is Revealed

An IFRAME is inserted when the "[View IFRAME]" link is clicked.

Previously existing content is pushed down to make room for the IFRAME. When the IFRAME appears, the "[View IFRAME]" link is changed to "[Hide IFRAME]" which, when clicked, removes the IFRAME.

The "[View IFRAME]" and "[Hide IFRAME]" links exchange background and text colors.

Here is the example:

 
Here is the source code:

The DIV tag —

<div 
   id="aniframeupstart" 
   align="center" 
   style="display: none;">
<iframe 
   src="//www.willmaster.com/software/" 
   margin="10" 
   border="1" 
   scrollbars="auto" 
   width="450" 
   height="300">
</iframe>
</div>

 
The links —

<span 
   id="viewiframe" 
   onclick="DoViewIFRAME('viewiframe','hideiframe','aniframeupstart');" 
   style="line-height: 16px; 
      font-size: 14px; 
      font-weight: bold; 
      font-family: sans-serif; 
      color: brown; 
      background-color: gold;">
<nobr>[View IFRAME]</nobr>
</span>
<span 
   id="hideiframe" 
   onclick="DoHideIFRAME('hideiframe','aniframeupstart','viewiframe');" 
   style="display: none; 
      line-height: 16px; 
      font-size: 14px; 
      font-weight: bold; 
      font-family: sans-serif; 
      background-color: brown; 
      color: gold;">
<nobr>[Hide IFRAME]</nobr>
</span>

 
The JavaScript —

<script type="text/javascript" language="JavaScript"><!--
function DoViewIFRAME(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "";
document.getElementById(tid3).style.display = "";
}
function DoHideIFRAME(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "none";
document.getElementById(tid3).style.display = "";
}
//--></script>

Back to:
Hide and Display Content On Demand
Hide and Reveal Content, On Demand: How It Works

Will Bontrager