Collapsable Table problem

[KazeEnji]

Hey so I have some javascript and CSS code and I can't figure out where the problem is.

Javascript (and a little HTML)

<script type="text/javascript">
			var rowVisible = false;

			function toggleDisplay(tbl) 
			{
			   var tblRows = tbl.rows;
			   for (i = 0; i < tblRows.length; i++) 
			   {
				  if (tblRows[i].className != "headerRow") 
				  {
					 tblRows[i].style.display = (rowVisible) ? "none" : "table-row";
				  }
			   }
			   rowVisible = !rowVisible;
			}
			</script>
            		
			<table id="theTable" width="100%" border="0">
			  <tr class="headerRow">
			    <td><div align="center">
			      <h1>Software </h1>
		        </div></td>
			    </tr>
			  <tr class="headerRow">
			    <td><h3 onmouseover="style.fontWeight = 'bold'" onmouseout="style.fontWeight = 'normal'" onclick="toggleDisplay(document.getElementById('theTable'))">Norton Antivirus Endpoint Protection</h3></td>
		      </tr>

CSS

table#theTable tr {
   display:none;
}

table#theTable tr.headerRow {
   display:table-row;
}

Now what it's supposed to do, and actually does do, is when you click on the tr.header-row element, it opens up the cell beneath it. My problem I'd like to figure out is why I have to click twice to enable a different header.

For instance, if I click on a header, it'll open up just fine. But the moment I go to click on a different header, I have to click twice before it opens up. It's like the first click shifts focus then the second click activates the display code or something.

Does anyone see anything that would cause this? Or maybe some code I'm missing to fix it? I'd like the user to be able to click on any one of them and have it open on the first click. I don't care how many are open at a time, I just don't want them to have to click more than once to open up the information.

Thanks!
-Kaze-