在使用<div>折疊原生之前，需要了解兩個重要的CSS屬性：display和visibility。display屬性用于控制元素如何顯示，常用的取值有block、inline和none。block會將元素以塊級元素形式顯示，即獨占一行；inline則以行內元素形式顯示，即元素在同一行內顯示；none可以將元素隱藏起來。visibility屬性也用于控制元素是否可見，不同的是，visibility屬性將元素隱藏后仍然會占用頁面空間。
使用<div>折疊原生可以通過JavaScript來控制元素的隱藏和顯示。以下是一個簡單的示例：
<!DOCTYPE html>
<html>
<head>
<style>
#content {
display:none;
}
</style>
</head>
<body>
<button id="toggleBtn" onclick="toggleContent()">Toggle</button>
<div id="content">
<p>This is the hidden content.</p>
</div>
<br>
<script>
function toggleContent() {
var content = document.getElementById("content");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
</script>
</body>
</html>在上面的代碼中，使用了一個<button>按鈕作為觸發器，并通過點擊按鈕來切換<div>元素的顯示狀態。初始狀態下，<div id="content">中的內容是被隱藏的，點擊按鈕后，如果內容是隱藏的，則將其顯示出來，否則將其隱藏。
除了通過JavaScript來控制顯示狀態外，<div>折疊原生還可以使用更簡潔的方式來實現。以下是一個使用:checked偽類來實現的案例：
<!DOCTYPE html>
<html>
<head>
<style>
#toggleBtn:checked ~ #content {
display: block;
}
#content {
display: none;
}
</style>
</head>
<body>
<input type="checkbox" id="toggleBtn">
<label for="toggleBtn">Toggle</label>
<div id="content">
<p>This is the hidden content.</p>
</div>
</body>
</html>在這個案例中，我們使用了一個<input type="checkbox">作為觸發器，并通過:checked偽類來控制<div>元素的顯示狀態。初始狀態下，<div id="content">中的內容是被隱藏的，選中<input type="checkbox">后，通過CSS選擇符#toggleBtn:checked來將<div>元素的display屬性設為block，從而顯示內容。
總而言之，<div>折疊原生是一種簡單卻實用的技術，可以通過JavaScript或CSS來控制元素的顯示和隱藏。通過應用<div>折疊原生，我們可以將頁面的內容進行有效的分類和整理，從而提升用戶體驗和網站的可讀性。