純css實現摺疊面板

本例實現了已知高度元素的顯示與摺疊，但不能應用於高度不固定的元素

   <input type="checkbox" class="fold-button">
   <section>
       <div class="fold-content"></div>
    </section>

   .fold-button{
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance:none
 
; 
        width: 30px;
        height: 20px;
        border-radius: 4px;
        background: red;
    }
    .fold-button:checked{
        background: green;
    }
    .fold-button + section{
        overflow: hidden;
    }
    .fold-button + section > div.fold-content{
        /* 高度仍然存在(仍然佔位) */
        /* transform: translateY(0);
        transform-origin: top; */
 

        /* 太生硬沒有過渡效果 */
        /* display: block; */
        /* 撐不開父級 */
        /* position: absolute;
        top: 0;
        left: 0; */
        /* 高度仍然存在(仍然佔位) */
        /* position: relative;
        top: 0; */
        height: 200px;
        background: #def;
        border-radius: 4px;
        opacity:1;
        overflow
 
: hidden;
        transition: height 1s ease-out, opacity 1s ease-out;
        -moz-transition: height 1s ease-out, opacity 1s ease-out;
    }

    .fold-button:checked + section > div.fold-content{
        opacity:0;
        height: 0;
        /* 高度仍然存在(仍然佔位) */
        /* transform: translateY(-100%); */
        /* 太生硬沒有過渡效果 */
        /* display: none; */ 
        /* 撐不開父級 */
        /* top: -100%; */
    }