Use HTML and CSS to achieve click Content Display and then click Hide

Implementation ideas:

1.display:none, hidden elements; display:black when clicked;

2. Set the hidden element height to 0,overflow:hidden; overflow:visible when clicked;

Because the first article can only realize the click-time display, can not be implemented to continue to hide; Exclusion Method 1.

Consider the check box feature, click on the Style box with a small tick, and then click on the small tick disappears.

HTML Implementation code:

  <Div>        <inputtype= "checkbox"ID= "Dianji">        <label for= "Dianji">Click</label>        <P>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Commodi optio sed eligendi Repudiandae. Sequi Debitis, Totam, Praesentium laudantium numquam eum
Voluptatibus non eligendi saepe animi quibusdam delectus Ab nostrum, Perferendis libero eaque
Magnam Officia aperiam! Voluptate nam Dolorem eligendi, Quasi harum deserunt.
Quibusdam eveniet delectus optio deleniti maiores libero incidunt? </P>            </Div>

CSS Implementation code:

p{    border:1px solid red;    height:0px;
/* Display:none; */
   Overflow:hidden;

}

input:checked~p{/    * display:block; */    overflow:visible;}

　　

Use HTML and CSS to achieve click Content Display and then click Hide