<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><style> .collapse-toggle{                display: none;         }        .content{            max-height: 0px;            overflow: hidden;            transition: all .3s;        }        .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        }</style><body>  <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/>    </div>  </div></body></html>