How to achieve dynamic display and hide effect in html

Effects goal graph:

This is quite easy to achieve, with source code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>点击查看全文</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style type="text/css">
      *{
  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 so that
 } 
    </ style > 
    < Script type = "text / JavaScript" > 
      $ (Document) .ready ( function () { 
  $ ( " .showContent " ) .click ( function () {         // when the "expand full text" button when clicked 
    $ ( " .content " ) .Show ();              // show that part is not completely displayed 
    $ ( the this ) .parent () hide ();.            // note here brief description of hidden text, because the original text which have an ellipsis last, after not hide consequence is that there are still deployed ellipsis 
  }); 
  $ ( " .hideContent " ) .click (function () {          // When the "hide the full text" button when clicked 
    $ ( the this ) .parent () hide ();.            // hide the already displayed text 
    $ ( " .showContent " .) .parent () Show ();        // text is displayed briefly described 
  }); 
}); 
    </ Script > 
  </ head > 
  < body > 
    < div class = "is showAll," > 
      < P class = "title" > 
        an inspirational story               
      < / P > 
      < P class = "author"> 
         Author: from the network Posted: 2014-3-1 
      </ the p- > 
      < the p- > 
        Mr. Peter Hande incumbent Carnegie Corporation (Dale Carnegie & Associates) President and Chief Executive Officer. Carnegie training company leader in the world, has 160 offices in 85 countries around the world. 
        In addition, Mr. Peter or director of several large companies, as a training others how to get the president of the professional organization's success, how he succeed it? Recently, reporters at the Grand Hyatt Beijing's interview with 
        the CEO, to hear him tell the story of how he is to succeed. 
        Mr. Peter talked about his understanding of success through a story. He said he was at the age of five because of illness to see a doctor when the pain ... 
        < A class = "showContent" href = "JavaScript: void (0);" > View full text </ A > 
      </ the p- > 
      < div class = "Content" >
        Mr. Peter Hande incumbent Carnegie Corporation (Dale Carnegie & Associates) President and Chief Executive Officer. Carnegie training company leader in the world, has 160 offices in 85 countries around the world. 
         In addition, Mr. Peter or director of several large companies, as a training others how to get the president of the professional organization's success, how he succeed it? Recently, reporters at the Grand Hyatt Beijing's interview with 
         the CEO, to hear him tell the story of how he is to succeed. 
         Mr. Peter talked about his understanding of success through a story. He said he went to the doctor because of illness, the pain was five years old when he was hurt, the doctor asked him, what you most want, Mr. Peter said to the doctor, I want 
         to be happy, the doctor said, that you are happy he wants to, and he was really happy. So Mr. Peter said, there are many people who want to succeed, there are many people asked him how to be successful as soon as possible. He believes that you should look at 
         what is the definition of success? Your definition of success if family harmony, then you should think of ways to communicate with family members more, pay more time and enhance harmony among family members also asked the family to upgrade their processing 
         capacity problem. 
         Mr. Peter said: "My definition of success is happy, I will not do the things I do not like and do not like the work of a Chinese saying goes, 'people under the eaves, had to bow', I do not like that kind of situation. I would not like 
         to do Since I believe that happiness is success, so to say, I have been very successful at the age of 5. ". 
         < a class =" hideContent " href =" JavaScript: void (0); "> Collapse text </ A > 
      </ div >    
    </ div >     
  </ body > 
</ HTML >

But above just static, but if it is dynamic, hundreds of thousands of data, this time on the need to use a dynamic html.

Is the need to achieve showing the effect of the aid for loop in html page. (Li allowed to generate a plurality of labels)

Then write the above will be a problem. It'll make all the class include impact for the content of the label. So that piece of js code in question. So we need to use id to change the hide and show the state should not use class.

Then how id want to increment. But let increment, and how can get id after the label increment. Because of the need to obtain the id in the above code to hide and show the inside, and then it will not write. . . Not js, need to learn about.

Further css code attached can be allowed to produce this effect:

Plus ellipsis like this, added a Read how you do it

{P
            width: 600px;
            overflow: hidden;
            text-overflow: ellipsis;
            the display: -webkit-Box;
            / * - WebKit-Line-CLAMP: 3; 3 line portions beyond display ellipsis removed All the attribute * /
            Line- height: 1.5em;
            height: 4.5em;
            overflow-Y: hidden;
            -webkit-Box-Orient: Vertical;
        }

There are other ways to control, with js control should also, to some extent, be late to learn, to achieve what this function.

How to achieve dynamic display and hide effect in html

Guess you like