CSS可以很方便地實(shí)現(xiàn)點(diǎn)擊展開和收起的效果。下面是一份代碼示例：

<code>HTML部分：</code>

<code><div class="container">
<button class="btn">展開</button>
<div class="content">
內(nèi)容
</div>
</div></code>

<code>CSS部分：</code>

<code>.container {
position: relative;
max-height: 50px;
overflow: hidden;
}
.container .content {
display: none;
position: absolute;
top: 50px;
left: 0;
right: 0;
background-color: #fff;
padding: 10px;
}
.container .btn {
position: absolute;
bottom: 0;
left: 0;
}
.container.active .btn {
bottom: auto;
top: 0;
}
.container.active .content {
display: block;
}</code>

代碼中，我們首先給包含內(nèi)容的容器.container設(shè)置max-height和overflow:hidden來限制高度并隱藏溢出部分。然后在容器中添加需要展開收起的內(nèi)容.content。內(nèi)容的樣式中，我們將display設(shè)置為none，使其一開始不可見。

要實(shí)現(xiàn)點(diǎn)擊展開和收起，我們可以給容器中的按鈕.btn添加一個(gè)點(diǎn)擊事件，并通過改變?nèi)萜鞯念惷麃砜刂普归_和收起的狀態(tài)。具體來說，當(dāng)容器被賦予.active類時(shí)，展開按鈕的位置將被調(diào)整且展開內(nèi)容可見。