Hide and Reveal Content, On Demand — Read More-Less Example

A "[Read More]" link is clicked to reveal new content.

A "[Read More]" link is clicked to reveal new content. Previously existing content is pushed down to make room. When new content appears, the "[Read More]" link is changed to "[Read Less]" which, when clicked, removes the content. The "[Read More]" and "[Read Less]" links exchange background and text colors.

Here is the example:

 
Here is the source code:

The paragraph tag (the inserted content) —

<p 
   id="readmoreblock" 
   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.
</p>

 
The links —

<span 
   id="readmoremore" 
   onclick="DoReadMore('readmoremore','readmoreless','readmoreblock');" 
   style="line-height: 16px; 
      font-size: 14px; 
      font-weight: bold; 
      font-family: sans-serif; 
      color: purple; 
      background-color: yellow;">
<nobr>[Read More]</nobr></span>
<span 
   id="readmoreless" 
   onclick="AbandonReadMore('readmoreless','readmoreblock','readmoremore');" 
   style="display: none; 
      line-height: 16px; 
      font-size: 14px; 
      font-weight: bold; 
      font-family: sans-serif; 
      background-color: purple; 
      color: yellow;">
<nobr>[Read Less]</nobr></span>

 
The JavaScript —

<script type="text/javascript" language="JavaScript"><!--
function DoReadMore(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "";
document.getElementById(tid3).style.display = "";
}
function AbandonReadMore(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