<div> 是 HTML 中用于創建一個塊級元素的標簽。它可以用來組合其他 HTML 元素，比如文本、圖像、表格等，以及應用 CSS 樣式。使用 <div> 可以方便地實現頁面布局和樣式設計。
<div> 左右折疊是一種常見的布局設計，可以使頁面看起來更加簡潔和美觀。通過使用 CSS 和 JavaScript，我們可以輕松地實現這種效果。接下來，將介紹幾個代碼案例，詳細說明如何使用 <div> 來實現左右折疊布局。
第一個案例是一個基本的左右折疊布局。下面是相應的 HTML 和 CSS 代碼：

HTML 代碼：

<div class="container">
<div class="left">
<h2>左側內容</h2>
<p>這里是左側的內容。</p>
</div>
<div class="right">
<h2>右側內容</h2>
<p>這里是右側的內容。</p>
</div>
</div>

CSS 代碼：

.container {
display: flex;
flex-direction: row;
}
<br>
.left {
width: 50%;
background-color: #f0f0f0;
}
<br>
.right {
width: 50%;
background-color: #ffffff;
}

在上述代碼中，我們創建了一個包含兩個 <div> 元素的容器，一個用于左側內容，一個用于右側內容。通過設置容器的 CSS 屬性 display 為 flex，并將其子元素設置為橫向排列，即可實現左右折疊布局。左側的背景顏色為淺灰色，右側為白色。
第二個案例是一個帶有折疊效果的左右布局。下面是相應的 HTML 和 CSS 代碼：

HTML 代碼：

<div class="container">
<div class="left">
<h2>左側內容</h2>
<p>這里是左側的內容。</p>
</div>
<div class="right">
<h2>右側內容</h2>
<p>這里是右側的內容。</p>
</div>
<div class="toggle-button" onclick="toggleLayout()">點擊切換布局</div>
</div>

CSS 代碼：

.container {
display: flex;
flex-direction: row;
}
<br>
.left {
width: 50%;
background-color: #f0f0f0;
transition: width 0.5s;
}
<br>
.right {
width: 50%;
background-color: #ffffff;
transition: width 0.5s;
}
<br>
.collapse {
width: 0;
}

JavaScript 代碼：

function toggleLayout() {
var left = document.querySelector('.left');
var right = document.querySelector('.right');
<br>
  if (left.classList.contains('collapse')) {
left.classList.remove('collapse');
right.classList.remove('collapse');
} else {
left.classList.add('collapse');
right.classList.add('collapse');
}
}

在上述代碼中，我們添加了一個按鈕元素，并應用了 JavaScript 代碼來實現點擊按鈕時的布局切換。通過添加 CSS 過渡效果，我們可以平滑地改變左右元素的寬度，從而實現折疊和展開的效果。點擊按鈕時，JavaScript 代碼將為左側和右側的 <div> 元素添加或移除名為 "collapse" 的類名，以觸發 CSS 過渡效果。
通過以上兩個案例，我們可以看到如何使用 <div> 元素和相應的 CSS 和 JavaScript 代碼來實現左右折疊布局。這種布局設計可以提升頁面的用戶體驗，同時也有助于展示內容并提供更多的空間。在實際項目中，我們可以根據具體需求進行修改和擴展，以滿足不同的頁面布局要求。