Sitebuilder Plus: Expand a Paragraph of Text with a Mouseover

  • 0
  • 1
  • Article
  • Updated 4 months ago
  • (Edited)
Note: We want to provide a few common and useful snippets for your use, but our support department is not able to assist you with editing code. They can help you with code placement.

Here is some CSS and HTML that will display the beginning text and hide the later text until you mouseover the Read More. All the code can be placed in an HTML box.

</p>You can have a short bit of text...</p>
<div id="restOfArticle" style="display:none">Then the additional text will display on mouseover</div>

<a onmouseover="showMoreOrLess(this,'restOfArticle');">Read more</a>

<script type="text/javascript">
function showMoreOrLess(thisObj,bonusContent){
     var caption = thisObj.innerHTML;
     //alert(caption);
     if ( caption == "Read more" ) {
         document.getElementById(bonusContent).style.display = "inline";
         thisObj.innerHTML = "Read less";
    
     } else {
         
         document.getElementById(bonusContent).style.display = "none";
         thisObj.innerHTML = "Read more";
     }
 }</script>
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 42,866 Points 20k badge 2x thumb

Posted 5 months ago

  • 0
  • 1
Photo of tmhpetrescue2796

tmhpetrescue2796

  • 122 Points 100 badge 2x thumb
Where do you put the content you want to display on mouse over?
Photo of Michelle C

Michelle C, Employee

  • 13,638 Points 10k badge 2x thumb
Replace the first line that says (You can have a short bit of text...) with your content.