Sitebuilder Plus: Expand a Paragraph of Text with a Mouseover

  • 0
  • 1
  • Article
  • Updated 11 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;
     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";
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 43,536 Points 20k badge 2x thumb

Posted 12 months ago

  • 0
  • 1
Photo of 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

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