[TimLinux] CSS 纯CSS实现动画展开/收起功能

内容转自CSS世界，理解之后进行了简化，简化后代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>CSS世界--展开/收起功能</title>
    <style>
    .table {
        display: table;
        width: 100%;
        width: calc(100% - 30px);
        max-width: 400px;
        margin: auto;
        table-layout: fixed;
        text-align: left;
    }
    .td {
        display: table-cell;
        padding: 5px;
    }

    input[type="checkbox"] {
        position: absolute;
        clip: rect(0 0 0 0);
    }
    .check-in,
    .check-out {
        color: #34538b;
        cursor: pointer;
    }
    .check-out {
        display: none;
    }
    :checked ~ .check-out {
        display: inline-block;
    }
    :checked ~ .check-in {
        display: none;
    }

    .element {
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s;
    }

    :checked ~ .element {
      max-height: 666px;
    }
    </style>
</head>
<body>
    <div class="table">
    <div class="td">
        <input id="check2" type="checkbox">
        <p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
        <div class="element">
            <p>display:table-cell其他一些应用，例如，两栏自适应布局，垂直居
            中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数
            自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时
            候。</p>
            <p>然而，此方法也有局限性，就是只能实现单行列表的等分，所以，如
            果我们希望列表数目超过一定值的时候变成多行，就需要根据数目不同，
            输出不同的DOM结构，仅仅靠CSS有难度。</p>
        </div>
        <label for="check2" class="check-in">更多↓</label>
        <label for="check2" class="check-out">收起↑</label>
    </div>
    </div>
</body>
</html>