jquery effects click Show and hide full text _jquery

This article examples of jquery click to show and hide the full text effects, here using jquery implementation, hidden effects, click to view the full text after the content expansion, click to collect the full text of its contents shrink, share for everyone to reference. Specifically as follows:

The screenshot of the running effect is as follows:

The specific code is as follows

First, look at the main frame procedure:

<!
    DOCTYPE html>  

The above program layout needs to note that the contents of the div with the name "content" need to be in line with the ellipsis "..." the previous text is consistent, that is, repeating a paragraph of text.

reason: because the ellipsis "..." the previous text will be hidden when you click the "View full text" button, if you do not hide the ellipsis "..." before the text, it will be clicked "View Full Text" button "..." Do not disappear, so that the article can not be smoothly read ~ ~ ~ ~

Two, the following 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 Here let text not appear
}

Notice 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 process:

$ (document). Ready (function () {
  $ (. showcontent). Click (function () {        //when the "Expand Full Text" button clicks
    $ (". 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 last ellipsis, do not hide the consequence is to expand the ellipsis is still there
  });
  $ (". Hidecontent"). Click (function () {         //when the "Full text" button is clicked
    $ (this). Parent (). Hide ();           Hides the text that has been displayed
    $ (". Showcontent"). Parent (). Show ();       Display the text in a brief description
  });

I hope this article will help you learn about the jquery program.