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

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>        <input type= "checkbox" id= "Dianji" >        <label for= "Dianji" >            click        </label >        <p>            

            Voluptatibus non eligendi saepe animi quibusdam delectus Ab nostrum, Perferendis libero eaque
            
            Quibusdam eveniet delectus optio deleniti maiores libero incidunt?        </p>            </div>

CSS Implementation code:

123	p{      border :  1px  solid  red      height :  0px      /* display:none; */      overflow :  hidden }

12345

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

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