HTML 展开和收起内容

CSS

.manualItem {
  text-align: left;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s;
}
:checked ~ .manualItem {
  max-height:666px;
}
input[type="checkbox"] {
  position:fixed;
  clip:rect(0 0 0 0);
}
:checked ~ .check-in {
  display:none;
}
:checked ~ .check-out {
  display:inline-block;
}
.check-out {
  display:none;
}
.check-in,.check-out {
  color:#34538b;
  cursor:pointer;
}

DIV

<div class="manualContent">
  <input id="check" type="checkbox">
  <h4> 内容标题</h4>
<p> 内容简要</p>
<div class="manualItem">
详情描述 - 点击后展开后的内容
</div>
<label for="check" class="check-in"><span><< 展开 >></span></label>
<label for="check" class="check-out"><span><< 收起 >></span></label>  
</div>