Panda's blog

利用CSS+JavaScript製作Show/Hide Div效果，當按滑鼠時，即可顯示或隱藏內容，可以利用此作法縮減網頁空間。

◎在頁面加入JavaScript

<script type="text/javascript" language="JavaScript">把下面這段貼在這裡</script>

function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}

function HideContent(d) { document.getElementById(d).style.display = "none"; } function ShowContent(d) { document.getElementById(d).style.display = "block"; } function ReverseDisplay(d) { if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } }

◎加入CSS樣式

<div id="uniquename" style="display:none;">
<p>要隱藏/顯示的內容放在這裡</p>
</div>

◎在Div中加入JavaScript，下列共有三種隱藏/顯示的方式，可依據需求選擇不同的顯示方式。

<a href="javascript:ShowContent('uniquename')">
點擊此顯示內容
</a>

<a href="javascript:HideContent('uniquename')">
點擊此隱藏內容
</a>

<a href="javascript:ReverseDisplay('uniquename')">
點擊此顯示/隱藏內容
</a>

參考出處：

http://www.willmaster.com/blog/css/show-hide-div-layer.php