CSS点击展开折叠效果

查看演示，直接上代码。

CSS：

.drop {
  cursor: pointer;
  display: block;
  background: #090;
}

.drop + input{
 display: none; /* hide the checkboxes */
}

.drop + input + div{
  display:none;
}

.drop + input:checked + div{
  display:block;
}

HTML：

<label class="drop" for="_1">Collapse 1 </label>

<input id="_1" type="checkbox"> 
<div>Content 1</div>

就可以啦。

 

原文来自：

1. How to make show/hide div with a toggle using CSS?