Javascript Help, changing a <tr> from display none to display block

[Conor]

is this possible? I dont really know javascript. Is there anyway to go about changing a the style of tr <tr style='display:none;'> to style='display:block;' on the click of a link?

[Jona]

Give the TR an ID, like so.


<tr id="myTR" style="display: none;">
<td>
Data
</td>
</tr>


Then refer to it using the getElementById() method of the document object.


<a href="noJavaScript.html" title="A JavaScript method of displaying a table row." onclick="document.getElementById('myTR').style.display='block'; return false;">Display Table Row</a>


It may be a good idea to include a .js file containing the document.write() functions to output the HTML link which activates the onClick function, so that users without JavaScript enabled won't even know that the link exists. If you use document.write() in the current page, your (X)HTML will become invalid, due to the JavaScript code. By including a .js file with the same code, since the .js file isn't validated for (X)HTML errors, you will not have any errors for this.

[Conor]

thank you jona that worked perfectly, I just have one more question if you wouldnt mind. Is there anyway to make it so the link will hide the table row when its open and display it when its hidden?

edit: Figured it out, I wrote my first function :D


function toggle() {
if (document.getElementById("toggle").style.display=='none') {
document.getElementById("toggle").style.display='block';

} else {
document.getElementById("toggle").style.display='none';
}
}

[Jona]

Congartumalations, Refresh! Glad you figured it out! :)