クリックで指定した要素の表示・非表示を切り替えるスクリプト。
表示エリアを稼ぎたい時に便利。
<strong onclick="Toggle('A')">Sample</strong>
<div id="A" style="display:block;">サンプル</div>
初期非表示にしたい場合は、display:noneとしておきます。
クリック時の呼び出しは、上記ソースだとonclickイベント属性でやってますが、
アンカータグの場合は次の例のようにhref属性に入れる事も出来ます。
<a href="javascript:Toggle('A')">Sample</a>
マウスオーバーにしたい時はonmoseoverになります。
これについてはアクションによってイベントハンドラ選んでください。
次のソースを任意の場所に貼り付けます。通常はheadタグ内。
<script type="text/javascript">
<!--
function Toggle(id) {
div = document.getElementById(id);
switch (div.style.display) {
case "none":
div.style.display="block";
break;
case "block":
div.style.display="none";
break;
}
}
//-->
</script>
要素のstyle=”display:block”をnoneに変更することで
表示・非表示を切り替えています。
displayは要素の存在そのものを隠すものなので、noneになった場合は要素が配置されていた空間そのものもなくなります。
空間は維持したいという場合はvisibilityプロパティを使用し、
上記ソースをdiv.style.visibility = "hidden"; とします。
スタイルを違うものにすれば、線をつけるとか太字にするとかも可能です。