Pure css realizes unfolding and folding effect through the checked value of input

  The expansion and retraction of text can be easily realized with JS, but the method we implement today is somewhat special, and we can achieve this effect through pure CSS. If there is the following html code<p>pure css text to expand and fold up the effect to explain</p><div class="box"><p>the beautiful theme is a learning and exchange platform for web site building technology, front-end development, visual design, etc., providing the latest and ..

The expansion and retraction of text can be easily realized with JS, but the method we implement today is somewhat special, and we can achieve this effect through pure CSS.
If you have the following html code

 <p>Pure css text Unfolding and folding effect Explanation</p> <div class="box">     <p> Beautiful theme It is a learning and exchange platform for web site building technology, front-end development, visual design, etc., providing the latest and free Zblog topic Download</p> </div> <label for="check" class="check in">More ↓</label> <label for="check" class="check out">Stow ↑</label>

To realize that the contents in the box are hidden at first

 .box { max-height:0; overflow:hidden; }

Click More to appear, then the [More] button becomes the [Stow] button
The difficulty lies in the click trigger effect. What do you think of here? No mistake, it is the checked selector of input. We add a

 <input id="check" type=" checkbox ">

Using this feature, we can judge the click action
That is, when selected, the content is expanded and the [More] button is hidden, and vice versa
Checked:

 :checked ~ .check-in { display :none; } :checked ~ .check-out { display:inline-block; }

Unchecked:

 .check-out { display:none; }

Did you find a checkbox box and hide it

 input[type="checkbox"] { display:none; }

Complete code:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Pure css achieves more stowing effects</title> <style> .box { max-height:0; overflow:hidden; } :checked ~ .box { max-height:666px; } input[type="checkbox"] { display:none; } :checked ~ .check-in { display:none; } :checked ~ .check-out { display:inline-block; } .check-out { display:none; } .check-in,.check-out { color:#34538b; cursor:pointer; } </style> </head> <body> <input id="check" type="checkbox"> <p>Pure css for more stowing effect</p> <div class="box"> <p>Beautiful theme is a learning and exchange platform for web site building technology, front-end development, visual design, etc. It provides the latest and free zblog theme download</p> </div> <label for="check" class="check in">More ↓</label> <label for="check" class="check out">Stow ↑</label> </body> </html>