Skip to main content

1.4K Messages


262.9K Points

Sat, Sep 26, 2015 8:42 PM


How can I 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";

This conversation is no longer open for comments or replies and is no longer visible to community members.


No Responses!