Webページ中の特定の要素の表示、非表示を切り替えるなんて処理は頻繁に必要になります。
頻繁に必要になるけれども、いっつも忘れてしまうのでメモ。
要は visible 属性を block (特定の領域を占有する)か、none (表示しない)かに設定すれば良いわけですね。
動作サンプル：
The quick brown fox jumps over the lazy dog.
コードサンプル：
<input type=”button” onclick=”setVisibility('test',true)” value=”make visible”/><br>
<input type=”button” onclick=”setVisibility('test',false)” value=”make invisible”/>
<script>
function setVisibility(id,visible){
document.getElementById(id).style.display = visible ? “block” : “none”;
}
</script>
<div id=”test”>The quick brown fox jumps over the lazy dog.</div>
<input type=”button” onclick=”setVisibility('test',false)” value=”make invisible”/>
<script>
function setVisibility(id,visible){
document.getElementById(id).style.display = visible ? “block” : “none”;
}
</script>
<div id=”test”>The quick brown fox jumps over the lazy dog.</div>