Hello! First post here, and I've been trying to make a table that expands to show the extra rows with clicks, but ultimately stays the same size (100% height and width) However, when I view this in Chrome it starts off at 50% height, and expands to 100%, whereas on IE it is 100% all the way through.

I was thinking about setting the height in the if statement or using a switch, but cannot find a way to set the height of the table in JS...

So yeah, has anyone got any ideas on how to sort this out? Either by fixing the issue with Chrome or by setting it in JS (or any other way!). Any help would be much appreciated.

Code:
<html>
<head>
<script>
function toggleSub() {
if( document.getElementById("hideSub").style.display=='none' ){
document.getElementById("hideSub").style.display = '';
}else{
document.getElementById("hideSub").style.display = 'none';
document.getElementById("hideNeuro").style.display = 'none';
document.getElementById("hideAtypicalBlank").style.display = 'none';
document.getElementById("hideAtypical").style.display = 'none';
}
}
function toggleNeuro() {
if( document.getElementById("hideNeuro").style.display=='none' ){
document.getElementById("hideNeuro").style.display = '';
document.getElementById("hideAtypicalBlank").style.display = 'none';
}else{
document.getElementById("hideNeuro").style.display = 'none';
if(document.getElementById("hideAtypical").style.display == '')
document.getElementById("hideAtypicalBlank").style.display = '';
}
}
function toggleAtypicalBlank() {
if( document.getElementById("hideAtypicalBlank").style.display=='none' && 
document.getElementById("hideNeuro").style.display=='none'){
document.getElementById("hideAtypicalBlank").style.display = '';
}else{
document.getElementById("hideAtypicalBlank").style.display = 'none';
}
}
function toggleAtypical() {
if( document.getElementById("hideAtypical").style.display=='none' ){
document.getElementById("hideAtypical").style.display = '';
}else{
document.getElementById("hideAtypical").style.display = 'none';
}
}
</script>
<style>
	th {font-size:32;width:100%}
   
	table#table1{
      margin:0;
      padding:0;
      height:15%;
      border:none
   }
   
   table#table2{
	  text-align:center;
      margin:0;
      padding:0;
      height:80%;
      border:none
   }
   
   td#table2data{font-size:32}
   
	table#table3{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }
   
   tr#hideSub {font-size:24;text-align:center}
</style>
</head>

<body>
<table width="100%" id="table1">
	<tr>
		<td Style="text-align:left;vertical-align:top"> <a href="Home.html"> Go Back Home </a> </td>
		<td Style="text-align:center;font-weight:bold;font-size:48"> Unit 4 Revision </td>
		<td Style="text-align:right;vertical-align:top"> <a href="unit4.html" >  Go Back To Unit 4 </a> </td>
	</tr>
	<tr>
		<td colspan="3" Style="text-align:center"> The '★' symbol can be hovered over to reveal more information about that entry </td>
	</tr>
	<tr>
		<td colspan="3" Style="text-align:center"> Click the text in a table to view the next column </td>
	</tr>
</table>

<br />

<table width="100%" id="table2" border="1">
	<tr>
		<td id="table2data" style="font-weight:bold"> How The Following Tables Split </td>
	</tr>
	<tr>
		<td id="table2data"> Topic Header </td>
	</tr>
	<tr>
		<td id="table2data"> Sub-Topic Headers (Where Applicable)</td>
	</tr>
	<tr>
		<td id="table2data"> Description</td>
	</tr>
	<tr>
		<td id="table2data"> Research Evidence For </td>
	</tr>
	<tr>
		<td id="table2data"> Research Evidence Against </td>
	</tr>
	<tr>
		<td id="table2data"> Evaluation </td>
	</tr>
</table>

<br />

<table border="1" id="table3" width="100%">
	<tr>
		<th colspan="2"><span onClick="toggleSub();">Drug Therapy</span></th>
	</tr>
	<tr id="hideSub" style="display:none;" >
		<td width="50%"><span onClick="toggleNeuro();">Neuroleptics</span> </td>
		<td width="50%"><span onClick="toggleAtypical();toggleAtypicalBlank()">Atypical</span> </td>
	</tr>
	<tr>
		<td id="hideNeuro" style="display:none;">Common neuroleptic drugs include Thorazine, Prolixin, and Haldol. These drugs block the activity of the neurotransmitter dopamine within 48 hours, and so it is their effect upon the dopamine system that is therapeutic, although it can take several weeks before there is any significant symptom reduction. </td>
		<td id="hideAtypicalBlank" style="display:none;"> </td>
		<td id="hideAtypical" style="display:none;">Schizophrenia is increasingly treated with atypical antipsychotic drugs (e.g. Clozaril?, Risperdal?, Zyprexa?). These drugs block activity of the neurotransmitter dopamine in the same way neuroleptics do but they also affect serotonin activity. </td>
	</tr>
</table>



</body>
</html>