JQuery implements text expansion and contraction effects and jquery Effects

JQuery implements text expansion and contraction effects and jquery Effects

There is only one small area on the webpage, but the descriptive text is very long. The following script displays the long text.
When you click expand, the text is expanded, and the text is shrunk.

Originally, you can write with the toggle () that comes with jQuery. However, when I do not work, toggle uses the click + flag to do this.

<Script language = "javascript" src = "jquery. js "> </script> <script language =" javascript "> var cur_status =" less "; $. extend ({show_more_init: function () {// alert ("show_more_init! "); Var charNumbers = $ (". content "pai.html (). length; // The total number of words var limit = 100; // display the number of words if (charNumbers> limit) {var orgText = $ (". content "2.16.html (); // original text var orgHeight = $ (". content "). height (); // original height var showText = orgText. substring (0, limit); // The final displayed text $ (". content "pai.html (showText); var contentHeight = $ (". content "). height (); // The height after the captured content $ (". switch "). click (function () {if (cur_status = "less") {$ (". content "pai.height(contentheight).html (OrgText ). animate ({height: orgHeight}, {duration: "slow" has been completed successfully (this%.html ("contract"); cur_status = "more";} else {$ (". content "pai.height(orgheight).html (showText ). animate ({height: contentHeight}, {duration: "fast" has been completed successfully (this%.html ("Expand"); cur_status = "less" ;}});} else {$ (". switch "). hide () ;}}); $ (document ). ready (function () {$. show_more_init () ;}); </script> <! DOCTYPE html> 
Method 2:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
The above is all the content of this article. I hope you will like it.