基于.active类名的点击显示更多交互效果实例页面

CSS代码：

.box {
    max-height: 80px;
    transition: max-height .25s;
    position: relative;
    overflow: hidden;
}
.more {
    position: absolute;
    width: 100%;
    padding-top: 20px;
    bottom: 0; left: 0;
    background: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.9) 50%, hsla(0,0%,100%,1));
}

.box.active {
    max-height: 200px;
}
.active > .more {
    display: none;
}
                

HTML代码：

<div id="box" class="box">
    文字内容...
    <a href="javascript:" id="more" class="more">更多↓</a>
</div>

JS代码：

var box = document.getElementById('box'), 
    more = document.getElementById('more');
if (box && more) {
    more.onclick = function () {
        box.className += ' active';    
    };    
}