如何在页面上实现收起展开的效果

Question

如何在页面上实现收起展开的效果 如图

Answer 1

<script>
    function toggle(id,exp) {
        document.getElementById(id).style.display =exp?'block':'none';
        document.getElementById('a' + id).style.display = exp ? 'none' : 'inline';
    }
</script>
<a href="javascript:toggle('detail',true)" id="adetail">展开1</a><br />
<div id="detail" style="display:none">
    详细内容1。。。。。。。
    <div style="text-align:right"><a href="javascript:toggle('detail')">收起</a></div>
</div>
<a href="javascript:toggle('detail1',true)" id="adetail1">展开2</a><br />
<div id="detail1" style="display:none">
    详细内容2。。。。。。。
    <div style="text-align:right"><a href="javascript:toggle('detail1')">收起</a></div>
</div>