Skip to main content
Brand User

636 Messages

 • 

43.8K Points

Tue, Jul 16, 2019 3:50 PM

Sitebuilder Plus: Expand a Paragraph of Text with a Mouseover

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 >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>

Responses

3 Messages

 • 

172 Points

a year ago

Where do you put the content you want to display on mouse over?
Brand User

574 Messages

 • 

38K Points

Replace the first line that says (You can have a short bit of text...) with your content.