There is only one small area on the page, but the descriptive text is very long, and the following script implements a portion of the long text display.
When the user clicks Expand, the text expands, and the text is closed.
Originally with jquery toggle () can write, but I do toggle has not work, so I used the Click + logo bit to do
<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"). html (). length;//Total Words
var limit=100;//display words
if (charnumbers>limit)
{
var orgtext=$ (". Content"). HTML ()//Original text
var orgheight=$ (". Content"). Height ();//Original height
var showtext=orgtext.substring (0,limit);//Final text displayed
$ (". Content"). html (showtext);
var contentheight=$ (". Content"). Height () ()//high after intercepting content
$ (". Switch"). Click (
function () {
if (Cur_status = = "less") {
$ (". Content"). Height (contentheight). HTML (orgtext). Animate ({Height:orgheight}, {duration: "slow"});
$ (this). HTML ("close");
Cur_status = "more";
}else{
$ (". Content"). Height (orgheight). HTML (showtext). Animate ({Height:contentheight}, {duration: "fast"});
$ (this). HTML ("expand");
Cur_status = "less";
}
}
);
}
Else
{
$ (". Switch"). Hide ();
}
}
});
$ (document). Ready (function () {
$.show_more_init ();
});
</script>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>test</title>
<style>
#limittext {
width:640px;
Height:auto;
position:relative;
Background-color: #ccc;
Color:black;
}
. switch{
font-size:12px;
Text-align:center;
Cursor:pointer;
Font-family:verdana;
font-weight:800;
Position:absolute;
bottom:0;
width:100%;
/*background:url (more-bg.png) repeat-x bottom;*/
height:40px;
line-height:80px;
}
</style>
<body>
<div id= "Limittext" >
<div class= "Content" style= "padding-bottom:15px;" >
It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text, it's a long piece of text, it's a long paragraph of text, it's a long paragraph of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, It's a long piece of text,It's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text, it's a long piece of text
</div>
<div class= "Switch" > Expand </div>
</div>
</body>
