HTML5 details/summary更多展开收起效果实例页面

效果：

据台媒报道，大陆歌手大壮的《我们不一样》近来攻占了台湾KTV排行榜冠军，在榜单上排名超过张惠妹、林俊杰的新歌名次。台湾网友评论称，太好听了，一听马上就停不下来。除了《我们不一样》外，这几首你一定听过的歌，也受到台湾歌迷的青睐。

其他几首歌曲包括歌舞剧演员李玉刚的《刚好遇见你》以及王俊琪的《我多喜欢你你会知道》。

CSS代码：

::marker {
    font-size: 0;
}
summary {
    user-select: none;
    outline: 0;
}
.more {
    display: none;
}
[open] .more {
    display: block;
}
[open] summary a {
    font-size: 0;
}
[open] summary a::before {
    content: '收起';
    font-size: 14px;
}

HTML代码：

<details>
    <summary>
        <p>据台媒报道，大...青睐。</p>
        <div class="more">
            <p>其他几首歌曲...</p>
        </div>
        <a>更多</a>
    </summary> 
</details>