Code: Select all
document.getElementById('table1').style.visibility = 'visible';
document.getElementById('table1').style.visibility = 'hidden';
Code: Select all
document.getElementById('table2').style.display = '';
document.getElementById('table2').style.display = 'none';
Code: Select all
<html>
<script language="JavaScript">
function fncShow1()
{
document.getElementById('table1').style.visibility = 'visible';
}
function fncHide1()
{
document.getElementById('table1').style.visibility = 'hidden';
}
function fncShow2()
{
document.getElementById('table2').style.display = '';
}
function fncHide2()
{
document.getElementById('table2').style.display = 'none';
}
</script>
<style>
.box{
width : 300px ;
height : 100px ;
border:2px solid;
}
</style>
<body>
<h1>Visibility</h1>
<div id="table1" class="box" >Test Visibility</div>
<input name="btnShow1" id="btnShow1" type="button" value="Show" onClick="JavaScript:fncShow1();">
<input name="btnHide1" id="btnHide1" type="button" value="Hide" onClick="JavaScript:fncHide1();">
<br/>
<hr/>
<h1>Display</h1>
<div id="table2" class="box">Test Display</div>
<input name="btnShow2" id="btnShow2" type="button" value="Show" onClick="JavaScript:fncShow2();">
<input name="btnHide2" id="btnHide2" type="button" value="Hide" onClick="JavaScript:fncHide2();">
</body>
</html>