css 实现折叠面板 带动画过度效果 带图标切换

通过label 的for属性和CheckBox实现  

html 

	<div class="collapse-item">
			<input type="checkbox" id="collapse1" checked name="collapse" class="collapse-toggle"></input>
			<label style="display: flex;" for="collapse1">
				<div>第一个collapse</div>
				<img class="not-show" style="width: 20px;height: 20px;" src="http://csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042">
				<img class="show" style="width: 20px;height: 20px;" src="https://img-blog.csdnimg.cn/2019091813595558.png">
			</label>
			<div class="content">
				这个是切换内容<br/>
				这个是切换内容<br/>
				这个是切换内容<br/>
				这个是切换内容<br/>这个是切换内容<br/>这个是切换内容<br/>这个是<br/>切换内容<br/>
				这个是切<br/>换<br/>内容<br/>
			</div>
		</div>

		<div class="collapse-item">
			<input type="checkbox" id="collapse2" checked="" name="collapse" class="collapse-toggle"></input>
			<label style="display: flex;" for="collapse2">
				<div>第二个collapse</div>
				<img class="not-show" style="width: 20px;height: 20px;" src="http://csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042">
				<img class="show" style="width: 20px;height: 20px;" src="https://img-blog.csdnimg.cn/2019091813595558.png">
			</label>
			<div class="content">
				这个是切换内容<br/>
				这个是切换内容<br/>
				这个是切换内容<br/>
				这个是切换内容<br/>这个是切换内容<br/>这个是切换内容<br/>这个是<br/>切换内容<br/>
				这个是切<br/>换<br/>内容<br/>
			</div>
		</div>

 

css:

.collapse-toggle{
	    		display: none;
		 }
		.content{
			max-height: 0px;
			overflow: hidden;
			transition: all .38s;
		}
		.collapse-toggle:checked~.content{
			max-height: 250px;
		}
		.collapse-toggle:checked ~label .show{
			display: none
		}
		.collapse-toggle:not(:checked) ~label .not-show{
			display: none
		}
		.collapse-item{
			margin: 10px;
			border-radius: 10px
		}