show/hide ligesom "kildekode"

I dette forum er der denne show/hide funktion hver gang nogle har indtastet noget "kildekode".
Man klikker på overskriften og så rykker resten af siden ned, så der bliver plads til at indsætte "kildekode".

Hvordan er dette lavet?

Kode 

<table>
<tr>
<td align="center" style="cursor:hand;" onclick="if(document.all.kildekode.style.display=='none')document.all.kildekode.style.display='inline';else document.all.kildekode.style.display='none';">vis kildekode</td>
</tr>
</table>
<span id="kildekode" style="display:none;">

<table>
  <tr> 
    <td>Kildekode...</td>
  </tr>
</table>
</span>

I dette forum er der denne show/hide funktion hver gang nogle har indtastet noget "kildekode".
Man klikker på overskriften og så rykker resten af siden ned, så der bliver plads til at indsætte "kildekode".

Hvordan er dette lavet?

Kode 

<script type="text/javascript" language="JavaScript">
<!--
function showhidepre (element) {
	if (document.getElementById(element).style.display == "none") {
		document.getElementById(element).style.display='block';
	} else {
		document.getElementById(element).style.display='none';
	}
}
-->
</script>