Home > Developer > JavaScript
There is only one small area on the webpage, but the descriptive text is very long. The following script displays the long text.
When a user clicks expand, the text is expanded, and the text is merged.
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.
Copy codeThe Code is as follows:
<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" character .html (). length; // total words
Var limit = 100; // display words
If (charNumbers> limit)
{
Var orgText = $ (". content" pai.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 of the captured content
$ (". Switch"). click (
Function (){
If (cur_status = "less "){
$ (". Content" 2.16.height(contentheight).html (orgText). animate ({height: orgHeight}, {duration: "slow "});
Certificate (this).html (" ");
Cur_status = "more ";
} Else {
$ (". Content" 2.16.height(orgheight).html (showText). animate ({height: contentHeight}, {duration: "fast "});
("Expand ");
Cur_status = "less ";
}
}
);
}
Else
{
$ (". Switch"). hide ();
}
}
});
$ (Document). ready (function (){
$. Show_more_init ();
});
</Script>
<! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body>
<Div id = "limittext">
<Div class = "content" style = "padding-bottom: 15px;">
This is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text
</Div>
<Div class = "switch"> Expand </div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
