A coworker asked me how to toggle a column in a table so that it was either visible or not, he wanted to do this in PHP. After looking over his code, I realized this might be something that would work and look better if done in javascript.
Now I'm not very good at javascript, and I rarely have to write any, but this is what I came up with as a working example.
<script type="text/javascript">
function toggleElement (elementId) {
var element,newelement;
if (document.all)
element = document.all[elementId];
else if (document.getElementById)
element = document.getElementById(elementId);
if (element.style.display == "none") { newelement=""; } else {newelement = "none"; }
if (element && element.style)
element.style.display= newelement;
}
</script>
<title>Example of hiding a table with Java Script and CSS</title>
<html>
<table border=1 width=100%>
<tr>
<td id="tone">Column One</td>
<td id="ttwo">Column Two</td>
<td id="tthree">Column Three</td>
</tr>
</table>
<center>
<p>
<input type=checkbox onClick="toggleElement('tone');" value="Toggle Column One" checked> Column One
<input type=checkbox onClick="toggleElement('ttwo');" value="Toggle Column Two" checked> Column Two
<input type=checkbox onClick="toggleElement('tthree');" value="Toggle Column Three" checked> Column Three
</p>
</center>
</html>This seems to work well on firefox, but I have not tested it on any other browsers.. Here is a live example http://www.fratm.com/examples/hidden-column.html
-Fratm