How to hide tables using its id

[rameshreddyg]

Hi,

I am trying to hide a table based on its id on clicking a button.

function showTable() {


var reasonTable = document.getElementById("reasonTable");
if(reasonTable.style.display == "none")
{
reasonTable.style.display = "block";
reasonTable.style.visibility = "visible";
}
}


<form id="MyForm" method="post" name="MyForm">
<TABLE id="reasonTable" style="visibility: hidden; display: none;" WIDTH="612" CELLPADDING="0" CELLSPACING="0" ALIGN="center">
<TR>
<TD VALIGN="middle" HEIGHT="15">Value1</TD>
</TR>
<TR>
<td>
<a href="#" onclick="javascript:showTable();">submit</a>
</td>
</TR>


</table>
</form>

It is giveing null for document.getElementById("reasonTable"). Whats wrong in above code. Thanks in advance.

[vsmash]

your javascript is not cross-browser compatible. Go get jquery - rather easy to get your head around. You can do stuff like $("#reasonTable").fadeIn();
Also, your link in the above code is apparently contained inside something hidden.

[Airshow]

Try this:

<script>
function toggleTable(link) {
	var reasonTable = document.getElementById("reasonTable");
	if(reasonTable.style.display == "none") {
		reasonTable.style.display = "block";
		link.innerHTML = "Hide Table";
	}
	else {
		reasonTable.style.display = "none";
		link.innerHTML = "Show Table";
	}
	return false;//important
}
</script>

<form id="MyForm" method="post" name="MyForm">
<table id="reasonTable" style="display:none;" width="612" cellpadding="0" cellspacing="0" align="center">
<tr><td valign="middle" height="15">Value1</td></tr>
</table>
<a href="#" onclick="return toggleTable(this);">Show Table</a><!-- note "return" here -->
</form>

Airshow

[rameshreddyg]

Tried but no luck. object required error at if(reasonTable.style.display == "none") {

[Freon22]

I tested Airshow example and it works good. You need to find out why the document.getElementById is not returning the object "reasonTable"