CSS展開收起功能是一個非常實用的功能，可以提高網站的用戶體驗，讓用戶可以更加方便地獲取所需信息。下面，我們來學習一下如何使用CSS實現這個功能。

首先，我們需要使用HTML創建一個基礎框架。代碼如下：

<div class="wrapper">
<div class="header">
<h2>標題</h2>
<button class="btn-toggle">展開/收起</button>
</div>
<div class="content">
<p>內容</p>
</div>
</div>

接下來，我們可以使用CSS來實現展開/收起的功能。首先，我們需要把內容的高度設置為0，然后使用:hover偽類和transition屬性來實現鼠標滑過時的動畫效果。代碼如下：

.wrapper .content {
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.wrapper:hover .content {
height: 100px;
}

在上面的代碼中，我們將.wrapper .content的高度設置為0，并使用overflow: hidden來隱藏內容。然后，當.wrapper被:hover時，我們將.wrapper .content的高度設置為100px，并使用transition屬性來實現展開/收起的動畫效果。

最后，我們需要添加一個按鈕，讓用戶可以點擊展開/收起內容。代碼如下：

.wrapper .btn-toggle {
display: block;
margin: 10px auto;
padding: 5px;
border: none;
background-color: #ccc;
cursor: pointer;
}
.wrapper .btn-toggle:hover {
background-color: #aaa;
}
.wrapper .btn-toggle:before {
content: "展開";
}
.wrapper:hover .btn-toggle:before {
content: "收起";
}

在上面的代碼中，我們創建了一個.btn-toggle按鈕，并使用:before偽類在按鈕上添加文字。然后，當.wrapper被:hover時，我們修改btn-toggle的文字為“收起”。當用戶點擊按鈕時，我們需要使用JavaScript來切換內容的展開/收起狀態。代碼如下：

var btnToggle = document.querySelector('.btn-toggle');
var content = document.querySelector('.content');
btnToggle.addEventListener('click', function() {
if (content.classList.contains('active')) {
content.classList.remove('active');
content.style.height = 0;
} else {
content.classList.add('active');
content.style.height = '100px';
}
});

在上面的代碼中，我們使用querySelector方法獲取.btn-toggle和.content元素，并在按鈕上添加點擊事件。當用戶點擊按鈕時，我們判斷.content元素是否帶有active類。如果沒有，說明內容處于收起狀態，則我們將.active類添加到.content元素，并將其高度設置為100px。如果已經帶有active類，說明內容處于展開狀態，則我們將.active類從.content元素中刪除，并將其高度設置為0。

到此，我們已經成功地實現了展開/收起功能。使用CSS和JavaScript的結合可以方便地實現許多實用的功能，在將來的開發中也可以多加嘗試使用。