Home > Developer > Web Develop
Off work ~ ~ ~ I put together today a jquery small special effects hair, personally feel relatively simple, the swish of the written out to ~ ~ ~
Let's look at the final dynamic effect:
First, take a look at the main framework program:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title>Click to view full text</title> <Linktype= "Text/css"rel= "stylesheet"href= "Css/layout.css" /> <Scripttype= "Text/javascript"src= "Js/jquery-1.11.3.js"></Script> <Scripttype= "Text/javascript"src= "Js/layout.js"></Script> </Head> <Body> <Divclass= "ShowAll"> <Pclass= "title">An inspirational story</P> <Pclass= "Author">published online: 2014-3-1</P> <P>Mr. Peter Hande is president and CEO of the company, Dale Carnegie & Associates. Carnegie is a leader in the training industry and has 160 branches in 85 countries around the world. In addition, Mr. Peter is a director of several large companies, how did he succeed as president of a professional body that trains others to succeed? Recently, reporters in Beijing, the Grand Hyatt Oriental Hotel interviewed the CEO, listening to him about how he achieved success story. Mr. Peter told a story about his understanding of success. He said that when he was five years old, he went to see a doctor because he was sick ...<aclass= "Showcontent"href= "javascript:void (0);">View Full text</a> </P> <Divclass= "Content">Mr. Peter Hande is president and CEO of the company, Dale Carnegie & Associates. Carnegie is a leader in the training industry and has 160 branches in 85 countries around the world. In addition, Mr. Peter is a director of several large companies, how did he succeed as president of a professional body that trains others to succeed? Recently, reporters in Beijing, the Grand Hyatt Oriental Hotel interviewed the CEO, listening to him about how he achieved success story. Mr. Peter told a story about his understanding of success. He said he was five years old because of illness to see the doctor, when the illness made him very uncomfortable, the doctor asked him what you want most, Mr. Peter told the doctor, I want to be happy, the doctor said, you are happy, the result he is really happy. So, says Mr Peter, there are many who want to succeed, and many ask him how to succeed as quickly as possible. He thinks that it depends on your definition of success first. If your definition of success is family harmony, you should find ways to communicate more with your family members, spend more time, and improve your family's ability to deal with family problems. "My definition of success is happiness, and I won't do things I don't like and work I don't like," says Mr Peter. The Chinese proverb says ' people under the eaves have to bow ', I don't like the situation, I will not do that. Since I think happiness is a success, I have been very successful at the age of 5. "<aclass= "Hidecontent"href= "javascript:void (0);">Close the full text</a> </Div> </Div> </Body></HTML>
The above program layout needs to be noted that the contents of the div with the name "content" need to be consistent with the ellipsis "..." before the text is repeated.
The reason: Because the ellipsis "..." before the text will be clicked "View full Text" button to hide, if not hide the ellipsis "..." before the text, it will click on the "View full text" button "..." does not disappear, so the article will not be able to read ~ ~ ~
Second, the following to look at the style:
*{ padding:0; margin:0;}. showall{ width:60%; margin:0 Auto; Background: #ecebeb; padding:10px;}. ShowAll. title{ font-size:20px; Font-weight:bold; Color: #af0015;}. ShowAll. author{ color: #a1a1a1; margin:12px 0;}. ShowAll. content{ Display:none; Note that the text does not show up here}It is important to note that you need to hide the div with the name "content" so that you can click the "View full text" button to trigger the display event.
Third, the jquery procedure:
$ (document). Ready (function () { $ (". Showcontent"). Click (function () { ///When the "Expand Full Text" button is clicked, $ (". Content"). Show (); Show that part of the content that is not fully displayed $ (this). Parent (). Hide (); Here need to pay attention to hide the text of the brief description, because the original text inside the end of the ellipsis, do not hide the result is the expansion after the ellipsis is still there }); $ (". Hidecontent"). Click (function () { ///When the ' Close full text ' button is clicked (this ). Parent (). Hide (); Hides the text that has been displayed $ (". Showcontent"). Parent (). Show (); Display the abbreviated text );});Look at the above a piece of code I laughed, it is too simple ~ ~ ~ feel posted to the blog Park let the big God see will laugh at me O (∩_∩) o~~~, I have a problem, especially love to write notes, convenient to see ~ ~ ~
Do not tell me you do not understand, or I will despise you, I write the notes so clear, small white can read ~ ~ ~
jquery effects (1)-click to show and hide the full text
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
