Hide rows by default in expanding and collapsing tables

Question

I'm an extremely novice user and am having a really hard time finding information on creating html tables that expand and collapse with the parent row showing and child rows hidden by default. I've managed to make it work using some scripts I found searching online but the child rows are displayed by default. I have no knowledge of JQuery and would prefer not to add another language if I don't have to. My knowledge of Javascript is pretty basic, self taught from what I can find online. My knowledge of CSS and HTML are decent, but far from perfect.

Here is what I have:

function	toggle_visibility(tbid,lnkid) {
		if (document.getElementsByTagName) {
  		var tables = document.getElementsByTagName('table');
  			for (var i = 0; i < tables.length; i++) {
   				if (tables[i].id == tbid){
     					var trs = tables[i].getElementsByTagName('tr');
     					for (var j = 2; j < trs.length; j+=1) {
     						trs[j].bgcolor = '#CCCCCC';
       						if(trs[j].style.display == 'none') 
          					trs[j].style.display = '';
       						else 
          					trs[j].style.display = 'none';
    					}
   				}
 			}
 		}
   		var x = document.getElementById(lnkid);
   		if (x.innerHTML == '[-] ')
      		x.innerHTML = '[+] ';
   		else 
      		x.innerHTML = '[-] ';
		}

a {
	color: #ff0000;
}
#exco {
	color: #ff0000;
	text-decoration: none;
}
#tbl3RD {
	width: 100%;
	border: 1px solid #ff0000;
	border-bottom-width: 0px;
	cellspacing: 0px;
	border-spacing: 0px;
}
#dark {
	background-color: #242424;
}
#light {
	background-color: #8C8C8C;
}
#td75 {
	width: 75%;
}
#td25 {
	width: 25%;
}
#title {
	font-size: 110%;
	color: #FFFFFF;
	font-weight: bold;
}
#subtitle {
	color: #242424;
	font-weight: bold;
}

<table id="tbl3RD" name="tbl3RD">
		<tr id="dark">
			<td colspan="2"></td>
		</tr>
		<tr id="dark">
			<td id="title">
				Title of the table.
			</td>
			<td id="td75">
				<a id="exco" href="javascript:toggle_visibility('tbl3RD','lnk3RD');">
					<div align="right" id="lnk3RD" name="lnk3RD">[-] </div>
				</a>
			</td>
		</tr>
		<tr id="light">
			<td id="subtitle" colspan="2">
				Subtitle row that explains the content.
			</td>
		</tr>
		<tr>
			<td>
			</td>
			<td id="td75">
				Main content of the table.
			</td>
		</tr>
	</table>

If anyone can help me figure out how to have the subtitle and main content rows hidden by default I would be forever in your debt.

Thanks.

Answer 1

The final result of what I'm trying to will have about 15 tables ontop of each other to create cascading rows (sort of) that expand and collapse. I managed to get it to work with an onload in the body tag but was having issues getting it to work with multiple functions at once. I resolved the issue by creating a new parent function for each tables respective function like this:

<!--
function	toggle_visibility(tbid,lnkid) {
		if (document.getElementsByTagName) {
  		var tables = document.getElementsByTagName('table');
  			for (var i = 0; i < tables.length; i++) {
   				if (tables[i].id == tbid){
     					var trs = tables[i].getElementsByTagName('tr');
     					for (var j = 2; j < trs.length; j+=1) {
     						trs[j].bgcolor = '#CCCCCC';
       						if(trs[j].style.display == 'none') 
          					trs[j].style.display = '';
       						else 
          					trs[j].style.display = 'none';
    					}
   				}
 			}
 		}
   		var x = document.getElementById(lnkid);
   		if (x.innerHTML == '[-] ')
      		x.innerHTML = '[+] ';
   		else 
      		x.innerHTML = '[-] ';
		}

function	start() {
			toggle_visibility('tbl3RD','lnk3RD');
			toggle_visibility('tblW8','lnkW8');
}
//-->

a {
	color: #ff0000;
}
#exco {
	color: #ff0000;
	text-decoration: none;
}
#tbl3RD, #tblW8 {
	width: 100%;
	border: 1px solid #ff0000;
	border-bottom-width: 0px;
	cellspacing: 0px;
	border-spacing: 0px;
}
#dark {
	background-color: #242424;
}
#light {
	background-color: #8C8C8C;
}
#td75 {
	width: 75%;
}
#td25 {
	width: 25%;
}
#title {
	font-size: 110%;
	color: #FFFFFF;
	font-weight: bold;
}
#subtitle {
	color: #242424;
	font-weight: bold;
}

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body onload="start();">
<table id="tbl3RD" name="tbl3RD">
	<tr id="dark">
		<td colspan="2"></td>
	</tr>
	<tr id="dark">
		<td id="title">
			Title of the table.
		</td>
		<td id="td75">
			<a id="exco" href="javascript:toggle_visibility('tbl3RD','lnk3RD');">
				<div align="right" id="lnk3RD" name="lnk3RD">[-] </div>
			</a>
		</td>
	</tr>
	<tr id="light">
		<td id="subtitle" colspan="2">
			Subtitle row that explains the content.
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td id="td75">
			Main content of the table.
		</td>
	</tr>
</table>
<table id="tblW8" name="tblW8">
	<tr id="dark">
		<td colspan="2"></td>
	</tr>
	<tr id="dark">
		<td id="title">
			Title of the table.
		</td>
		<td id="td75">
			<a id="exco" href="javascript:toggle_visibility('tblW8','lnkW8');">
				<div align="right" id="lnkW8" name="lnkW8">[-] </div>
			</a>
		</td>
	</tr>
	<tr id="light">
		<td id="subtitle" colspan="2">
			Subtitle row that explains the content.
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td id="td75">
			Main content of the table.
		</td>
	</tr>
</table>
</body>
</html>

Answer 2

One way to hide elements is to set the display property to none. Your script will still be able to change the display property later. Try this:

#td75, #subtitle {
    display: none;
}

As a side note, I suggest changing your table elements to divs. Divs are much easier to manipulate and can easily be used to create a responsive table.