ASP.NET 客戶端內容展開/收縮實現：JavaScript 與 CSS 切換可見性

網頁常需「展開/收縮」區塊 (FAQ、側邊欄、長文摘要)。純客戶端實現零 PostBack、體驗流暢。本文提供原生 JS + CSS 方案、jQuery 簡化版、無障礙 (ARIA) 加強版。

核心邏輯

• 切換目標元素 display: none/block 或 max-height: 0/auto (動畫)。
• 同步更新觸發按鈕文字/圖示 (▼/▲、展開/收縮)。
• 可選：記錄狀態至 localStorage 保持跨頁一致性。

原生 JavaScript 實現 (ES6)

<button class="toggle-btn" data-target="#content1" aria-expanded="false">展開</button>
<div id="content1" class="collapsible" hidden>詳細內容...</div>

<script>
document.querySelectorAll('.toggle-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const target = document.querySelector(btn.dataset.target);
        const isHidden = target.hidden;
        target.hidden = !isHidden;
        btn.textContent = isHidden ? '收縮' : '展開';
        btn.setAttribute('aria-expanded', isHidden);
    });
});
</script>

CSS 動畫版 (平滑展開/收縮)

.collapsible {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}
.collapsible.expanded {
    max-height: 500px; /* 足夠大的值 */
    transition: max-height 0.5s ease-in;
}

// JS 切換 class
target.classList.toggle('expanded');

jQuery 簡化版 (舊專案相容)

$('.toggle-btn').click(function() {
    const $target = $($(this).data('target'));
    $target.slideToggle(300);
    $(this).text($target.is(':visible') ? '收縮' : '展開');
});

無障礙 (ARIA) 必備屬性

進階：記憶狀態

// 展開時存入
localStorage.setItem('collapsible_' + targetId, 'expapsed');
// 頁面載入還原
const saved = localStorage.getItem('collapsible_' + targetId);
if (saved === 'expanded') { target.hidden = false; btn.textContent = '收縮'; }

純前端實現輕量、無伺服器壓力、支援動畫與無障礙，是現代 Web 應用首選。