折疊展開效果是很常見的用戶交互體驗，而它的實現方法就是通過CSS來實現。在下面的代碼示例中，我們將展示如何使用純CSS來實現折疊展開效果。

.accordion {
border: 1px solid #ddd;
overflow: hidden;
}
.accordion-item {
border-top: 1px solid #ddd;
position: relative;
}
.accordion-item .toggle {
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
transform: rotate(-45deg);
}
.accordion-item .toggle:before,
.accordion-item .toggle:after {
content: "";
display: block;
width: 20px;
height: 2px;
background-color: #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.accordion-item .toggle:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.accordion-item .panel {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.accordion-item.active .toggle {
transform: rotate(135deg);
}
.accordion-item.active .panel {
max-height: 1000px;
transition: all 0.3s ease-in-out;
}

在這段代碼中，我們定義了一個基本的accordion樣式，然后為每個accordion-item添加了一個可點擊的toggle元素。當用戶點擊toggle元素時，我們通過max-height屬性和transition動畫將panel展開或收起。最后，我們使用transform屬性來實現toggle元素的旋轉效果。

使用以上CSS代碼，我們可以輕松地實現一個漂亮的折疊展開效果。