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

Source: Internet
Author: User

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 ~~~~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.