Show / Hide - need help

Hello, i got this simple Show/Hide script:

<script type="text/javascript"> function displayRow(){  var row = document.getElementById("captionRow"); if (row.style.display == '')  row.style.display = 'none'; else row.style.display = '';  }</script>


<table style="cursor: hand;" onclick="displayRow()">
<tr>
<td>Read more</td>
</tr>
</table>
<table id="captionRow">
<tr>
<td>Bla bla bla bla</td>
</tr>
</table>

HTML:

But right now it shows the table when i enter the site. But i only want to show it if you click read more. How can i change that?

And furthermore i would like a slide effect on it, if its possible.

Hope you guys can help, thanks.

 

Pretty easy I think, you need to initiate captionRow with style="display:none"

...
<table id="captionRow" style="display:none">
...