How can I expand a paragraph of text with a mouseover?

  • 0
  • 2
  • Question
  • Updated 3 years ago
  • Answered
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 Drew N

Drew N, Community Manager

  • 259,114 Points 100k badge 2x thumb

Posted 3 years ago

  • 0
  • 2
Photo of lczwilson7104

lczwilson7104

  • 154 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Expand the paragraph.

I have some long paragraphs that I would like only the first few lines of to show and minimize the rest, but if one hovered over "more" it will expand and show the entire paragraph.
Photo of Drew N

Drew N, Community Manager

  • 259,114 Points 100k badge 2x thumb
lczwilson7104,

Here is some pretty simple code that may serve your purpose, if you haven't found it already. Just replace the text with your text.