技術標籤：# CSScsscss3html

HTML部分：

      <inputid="check"type="checkbox"style="display:none"/>

<divclass="box">要收起展開的盒子</div>

<divclass="up-or-down">

<labelfor="check"class="check-in">
            <imgsrc="@/assets/imgs/upDownRaw.png"alt="這是一個上下箭頭圖示"class="raw"/>            
        </label>

</div>
       
CSS部分：
      
      .check-in {
            display: block;
      .raw {
            height: 1em;
            //圖示預設向上
            transform: rotate(180deg);
            transition: all 0.5s;}
      }

      //收起
      #check:checked ~ .box {
          max-height: 0;
          transform: translate(1.1);}

      //旋轉圖示
      #check:checked ~ .up-or-down .raw {
          transform: rotate(360deg);}

    .box {
          //盒子預設展開
          max-height: 70px;
          overflow: hidden;
          transition: max-height 0.5s;
    }
 

參考《CSS世界》