要素のstyle属性にはdisplayという属性があります。displayに「'block'」や「'none'」を設定することによって、表示や非表示を切り替えることができます。
<script language="javascript" type="text/javascript">
/**
* 要素を表示/非表示させる
* @id 要素のID
* @visible true(表示) または false(非表示)
*/
function visibleElement(id,visible){
document.getElementById(id).style.display = visible ? "block" : "none";
}
/**
* 表示/非表示の自動切換え
* @id 要素のID
* @visible true(表示) または false(非表示)
*/
function changeVisibility(id){
var ele = document.getElementById(id);
if (ele.style.display == 'none') {
//元々は'none'(非表示)の場合、表示させる
ele.style.display = 'block';
} else {
//非表示にする
ele.style.display = 'none';
}
}
</script>
<a href="#" onclick="changeVisibility('myEle');">表示・非表示の自動切換え</a> |
[<a href="#" onclick="visibleElement('myEle', true);">表示</a> | <a href="#" onclick="visibleElement('myEle', false);">非表示</a>]
<div id="myEle">表示されるものだよ</div>