<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>