CSS實現點擊折疊效果是Web開發中常用的特效之一，特別是在信息展示或者列表展示頁面中，折疊效果能夠讓頁面更加簡潔美觀。下面我們介紹一下如何使用CSS實現點擊折疊效果。

<code>/*CSS代碼開始*/
.collapsible {
cursor: pointer;
}
.collapsible:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
/*CSS代碼結束*/
</code>

首先，我們需要定義一個折疊元素的樣式類.collapsible，為了讓用戶知道該元素可以點擊，我們設置光標為手型。其次，在.collapsible之后的虛擬元素使用:after偽元素，我們添加一個加號“+”，用于點擊展開的時候顯示，字體顏色為灰色。當我們點擊展開時，需要把加號改為減號“-”并改變顏色，所以我們需要再定義一個.active類。最后，我們定義了具體的內容樣式類.content，它是一個隱藏的容器，用于折疊展示內容。

<code><script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</code>

我們需要在JavaScript中調用document.getElementsByClassName("collapsible")獲取所有折疊元素，并為每個元素添加一個點擊事件。當折疊元素被點擊時，我們將元素的類.active切換為原來的狀態，并查找下一個元素作為展開內容容器。如果該容器當前狀態為隱藏，則展開該容器，否則就隱藏該容器。

以上就是使用CSS和JavaScript實現點擊折疊效果的全部步驟。請注意，代碼中的類名和元素的位置可能需要根據您的布局進行調整。部分低版本瀏覽器可能不支持某些CSS特性，需使用JavaScript進行隱藏/展示功能。