Jquery special effects (1)-click to show and hide the full text, jquery Special Effects

Jquery special effects (1)-click to show and hide the full text, jquery Special Effects

Off duty ~~~ I posted a small jquery special effect that I have compiled today. I personally think it is relatively simple. I wrote the short answer ~~~

Next, let's look at the final dynamic effect:

 

1. Let's take a look at the main framework program:

<! DOCTYPE html> 
In the above program layout, it should be noted that the content in the div named "content" must be consistent with the text before the ellipsis "...", that is, repeating a paragraph of text.
The reason is: because of the ellipsis "... "The previous text will be hidden when you click" view full text ", if the ellipsis is not hidden"... "If it is a text, it will click" view full text "after"... "does not disappear, so the article cannot be read smoothly ~~~~
 
Ii. Let's take a look at the style below:
* {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 is not displayed here}
Note that you need to hide the div named "content" so that you can click "view full text" to trigger the display event.
 
Iii. Jquery program:
$ (Document ). ready (function () {$ (". showContent "). click (function () {// when the "Expand full text" button is clicked $ (". content "). show (); // display the part of the content not fully displayed $ (this ). parent (). hide (); // you need to hide the text in the simple description here, because there is a ellipsis in the original text. The consequence of not hiding is that the ellipsis is still there after expansion }); $ (". hideContent "). click (function () {// when the "collapse full text" button is clicked $ (this ). parent (). hide (); // hide the displayed text $ (". showContent "). parent (). show (); // display the text in brief description });});
I smiled after reading the above Code. It's really easy ~~~~ I think that posting it to the blog Park will surely make me laugh at O ~~~, I have a problem. I especially love to write comments for later reading ~~~~
Don't tell me that you don't understand it. Otherwise, I will despise you. I write the comments so clearly that I can understand them ~~~~