Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    95
    Thanks
    13
    Thanked 1 Time in 1 Post

    expand-collapse text with mouseover/mouseout

    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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •