HTML對多個塊設置隱藏顯示可以讓網頁看起來更加簡潔和方便，同時也可以提高用戶體驗。在HTML中，我們可以使用一些特殊的標簽和屬性來實現這一功能。
<!DOCTYPE html>
<html>
<head>
<style>
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="toggle" onclick="toggle()">點擊展開/收起</div>
<div class="hide" id="content">
<p>這是隱藏的內容。</p>
</div>
<script>
function toggle() {
var content = document.getElementById("content");
if (content.classList.contains("hide")) {
content.classList.remove("hide");
content.classList.add("show");
} else {
content.classList.remove("show");
content.classList.add("hide");
}
}
</script>
</body>
</html>在上面的代碼中，我們使用了CSS的display屬性來控制塊的顯示和隱藏。首先，我們定義了兩個類名，.hide和.show，它們分別對應了隱藏和顯示狀態。然后，在HTML結構中，我們使用了一個div元素作為展開/收起按鈕，并綁定了一個onclick事件來觸發toggle函數。接著，我們使用了一個包含了我們要隱藏的內容的div元素，并給它賦予了一個id屬性，方便在JavaScript中找到它。最后，我們在JavaScript中編寫了toggle函數，通過控制元素的類名來實現展開和收起的效果。