CSS實現UI展開收起功能，是現在前端開發中經常會用到的技巧之一。通過利用CSS的一些布局和動畫特性，我們可以方便地實現一個簡單的展開收起功能，讓用戶在使用過程中獲得更好的交互體驗。

// HTML結構
<div class="wrapper">
<div class="content">
<p>這里是一段默認展示的內容，用戶可以點擊“展開”按鈕來查看更多信息。</p>
<p class="hidden">這里是展開后顯示的內容，用戶可以點擊“收起”按鈕來關閉。</p>
</div>
<button class="toggle-btn">展開</button>
</div>
// CSS樣式
.wrapper {
position: relative;
width: 500px;
margin: 0 auto;
}
.content {
height: 100%;
overflow: hidden;
}
.hidden {
display: none;
}
.toggle-btn {
position: absolute;
bottom: 0;
right: 0;
margin: 10px;
padding: 10px;
background: #007bff;
color: #fff;
border: none;
cursor: pointer;
transition: all .3s ease;
}
.toggle-btn:hover {
background: #0062cc;
}
// JavaScript交互
let wrapper = document.querySelector('.wrapper');
let content = document.querySelector('.content');
let toggleBtn = document.querySelector('.toggle-btn');
toggleBtn.addEventListener('click', function() {
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
toggleBtn.innerText = '收起';
} else {
content.classList.add('hidden');
toggleBtn.innerText = '展開';
}
});

以上代碼實現了一個簡單的展開收起功能，用戶可以點擊按鈕在默認顯示內容和展開內容之間切換，從而更好地了解頁面的信息。在實際應用中，我們可以根據實際需求和設計風格進行更多的樣式和交互細節調整，為用戶帶來更好的體驗。