height不确定时，如何使用动画效果展开高度

要点：

当元素 height 不确定时，可以使用 max-height 设置动画效果
a[href="foldBox"] 用于打开 #foldBox（利用伪元素 :target)
a[href="#"] 用于关闭 #foldBox

<style>
        body { padding: 10px; }
        .open {
            display: inline-block;
            font-weight: 800;
            font-size: 18px;
            text-decoration: none;
            border: 1px solid ;
            padding: 10px;
            margin: 0 0 10px;
            border-radius: 10px;
        }
        .foldBox {
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            max-height: 0;
            text-align: center;
            border-radius: 10px;
            transition: all .3s;
        }
        img {width: 30%;}
        p {
            font-weight: 800;
            font-size: 20px;
        }
        .foldBox:target {
            padding: 10% 0;  /*该属性只能运用于元素展开后*/
            max-height: 800px;
            border: 1px solid ;
        }

    </style>
    <a class="open" href="#foldBox">What's this?</a>
    <div id="foldBox" class="foldBox">
        <img src="32.jpg">
        <p>Are You Happy?</p>
        <a href="#">YES</a>
    </div>