show all info on "read more" return to normal size on "view less"

@so_is_thisDec 14.2006 — #Here is a simplistic approach to the issue:

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Read More/Less</title>
 <style type="text/css">
 <!--
 a {
 text-decoration: none;
 }
 td, th {
 padding: 0px 10px;
 }
 -->
 </style>
 <script type="text/javascript">
 <!--//
 var shortTextLength = 200;
 var saveLargeText = '';
 function MoreOrLess(link, span)
 {
 var obj = document.getElementById(span);
 if(saveLargeText == '')
 {
 saveLargeText = obj.firstChild.data;
 obj.firstChild.data = saveLargeText.substr(0, shortTextLength);
 link.firstChild.data = "...more...";
 }
 else
 {
 obj.firstChild.data = saveLargeText;
 saveLargeText = '';
 link.firstChild.data = "less";
 }
 link.blur();
 return false;
 }
 //-->
 </script>
 </head>
 
 <body>
 <table width="700">
 <tr>
 <td nowrap>Column 1</td>
 <td nowrap>Column 2</td>
 <td nowrap>Column 3</td>
 </tr>
 <tr>
 <td nowrap>Testing ==></td>
 <td><span id="largeText">
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.&nbsp;
 Now is the time for all young men to come to the aid of their country.&nbsp; 
 The quick brown fox jumped over the lazy dog.</span>
 
 <script type="text/javascript"><!--//
 var str = '&nbsp; [<a id="ctlMoreOrLess" href="javascript:void(0)"';
 str += ' onclick="return MoreOrLess(this, 'largeText')">less</a>]';
 document.write(str);
 MoreOrLess(document.getElementById('ctlMoreOrLess'), 'largeText');
 //--></script>
 
  </td>
  <td nowrap><== Testing</td>
 </tr>
 </table>
 </body>
 </html>[/code]

@newjersey_cfmauthorDec 14.2006 — #your a genius its work perfectly, now if only i understood what those tags meant ill be in great shape lol does anyone know of a site where i could look up javascript tags(not sure if this site does that) for example i have no clue what var str= means or str += means.. the problem is im really new to javascript, i use a lot of coldfusion when i have to program im starting to like javascript and want to start using javascript in place of coldfusion whenever i could. thanks for the help...

show all info on "read more" return to normal size on "view less"

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

show all info on "read more" return to normal size on "view less"

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴