折疊效果是一種常見的 CSS 效果，它可以讓頁面的內容在被點擊或者鼠標懸浮時展開或者隱藏起來。

.expandable {
overflow: hidden;
transition: height 0.5s ease;
}
.expandable.closed {
height: 0;
}
.expandable.open {
height: auto;
}

上面是一個很簡單的 CSS 實現折疊效果的代碼。我們通過設置元素的 overflow 屬性為 hidden，然后利用 CSS3 過渡效果來控制元素的高度變化，從而實現元素的展開和隱藏。

為了實現具體的折疊效果，我們還需要為元素設置狀態類，比如 .closed 和 .open，然后在 JavaScript 中通過添加或者刪除這兩個類來改變元素的狀態。

除了上面的代碼，我們還可以使用 JavaScript 庫來實現更加復雜的折疊效果，比如 jQuery 中的 slideUp() 和 slideDown() 方法，或者使用類似 BootStrap 中的 Collapse 組件。

$('.panel-title').click(function(){
var $panelBody = $(this).siblings('.panel-body');
if($panelBody.hasClass('in')){
$panelBody.removeClass('in').slideUp();
} else {
$panelBody.addClass('in').slideDown();
}
});

上面是使用 jQuery 實現折疊效果的代碼，我們在點擊 .panel-title 元素時判斷 .panel-body 元素的狀態，如果已經展開則關閉，否則則展開。代碼中，.in 類表示元素已經展開。