expand-collapse text with mouseover/mouseout

garevn · 02-03-2013, 04:16 PM

This is my current code, but i want a mouseover and mouseout behaviour to a text with no "read more" "read less" "images" ets.
For example

Line one....
Line two....

when mouseover in the table/div with the text, display:

Line one....
Line two....
Line three...
Line four...

when mouseout display back two lines

Code:

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

<body>
<div id="restOfArticle" style="display:none">blah blah</div>

<a onmouseover="showMoreOrLess(this,'restOfArticle');">Read more</a>

</body>

jmrker · 02-04-2013, 02:30 AM

Just change the order of your code sequence.

Code:

<body>
<div id="restOfArticle" style="display:none">blah blah</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>
</body>