Javascriptで表示・非表示の切り替え（style）

nandani

14年前

単純ですが、よく使用するプログラムなので。
要するに、javascriptによるstyleの切り替えです。

<script>
function show_block(){
   if(document.getElementById("hoge").style.display == ""){
      document.getElementById("hoge").style.display = "none";
   }else{
      document.getElementById("hoge").style.display = "";
   }
}
</script>

<p><a href="javascript:void(0)" onclick="show_block();">表示切替</a></p>
<div id="hoge" style="display:none;">こっち見んな！</div>

１．id="hoge"は、あらかじめdisplay:none;で、非表示にしておく。
２．show_block関数では、id="hoge"のdisplayが空（表示モード）ならばnone（非表示モード）に、noneならその逆という風にする。

■サンプル　[新しいウィンドウで開く]