<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>
.box { max-height:0; overflow:hidden; }
<input id="check" type=" checkbox ">
:checked ~ .check-in { display :none; } :checked ~ .check-out { display:inline-block; }
.check-out { display:none; }
input[type="checkbox"] { display:none; }
<! 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>