表示・非表示の切り替え。

まずはhtmlをこんな感じに。

<p>■表示・非表示切り替えスクリプト</p>
<p id="sample">ココの部分の表示を切り替えます。</p>
<p><a href="#" onclick="showContent()">表示</a>｜
<a href="#" onclick="hideContent()">非表示</a></p>

showContentは表示用の関数、hideContentは非表示用の関数とします。
その関数は、というと、

function showContent(){
document.getElementById('sample').style.visibility = 'visible';
}
function hideContent(){
document.getElementById('sample').style.visibility = 'hidden';
}

これだけ。ほら簡単。
試しにどうぞ↓

■表示・非表示切り替えスクリプト
ココの部分の表示を切り替えます。
表示｜非表示

scriptの内容を簡単にいうと、
javascriptでCSSのプロパティ（ここではvisibility）の値を操作しているだけのお話。

これだけだと、単純に消えるだけで、消えた所のスペースが開きっぱなし。
まぁ、表示の切り替えなので、正しいと言えば正しいのだけれど、あまり使い道が無いかも。。

そこで、上記の関数にスペースを詰める記述を追記してみます。
これも、同様にCSSのプロパティを操作します。

function showContent(){
document.getElementById('sample').style.visibility = 'visible';
document.getElementById('sample').style.display = 'block';
}
function hideContent(){
document.getElementById('sample').style.visibility = 'hidden';
document.getElementById('sample').style.display = 'none';
}

サンプルどうぞ↓

■表示・非表示切り替えスクリプト
ココの部分の表示を切り替えます。
表示｜非表示

これで完成。
といっても上記のサンプルでは、汎用性がゼロなので、
idの部分を引数で受け取ったりするなどして、独自にカスタマイズしてみて下さい。
scriptで操作した、visibility,displayプロパティについては、検索でどうぞ。

今回の表示・非表示の切り替えは、エクスプローラ風メニューに応用が出来るので、
まずは試しに作ってみると良いかも。

最近は、フォームにも使われることが多く、
例えば、Q1の回答内容によって、Q2は回答の必要が無くなるから消してしまう、とか。

ここで注意したいのが、消したからといってもsubmitすればCGIに値がわたるので、
nameのバッティングには注意 。
消す消さないに関わらず当然のことですが。。