Hide and Reveal Content, On Demand — Link Click Example

New content appears when a link is clicked.

New content appears when a link is clicked. Previously existing content is pushed down to make room.

Example:

 
Here is the source code:

The DIV tag —

<div 
   id="c1" 
   style="display: none; 
      border-color: purple; 
      background-color: yellow; 
      border-style: dashed; 
      border-width: 3px; 
      color: purple; 
      font-weight: bold; 
      padding: 20px; 
      margin: 20px;">
Ipsum lorum whatever. Ipsum lorum whatever. 
Ipsum lorum whatever. Ipsum lorum whatever. 
Ipsum lorum whatever. Ipsum lorum whatever. 
Ipsum lorum whatever.
</div>

 
The link —

<a href="javascript:InsertContent('c1');">
[Click for content]
</a>

 
The JavaScript —

<script type="text/javascript" language="JavaScript"><!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
	document.getElementById(tid).style.display = "";
	}
else {
	document.getElementById(tid).style.display = "none";
	}
}
//--></script>

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

Will Bontrager