Skip to main content
Brand User

634 Messages


43.7K 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;
     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";


3 Messages


172 Points

a year ago

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

525 Messages


37.5K Points

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