Pls assist = hidden tables, multiple links

JavaScript
1

Hello everyone. ive been tasked with creating a web-based ‘flow chart’. I decided to use a table that is hidden and as users choose an option, it either links them to the appropriate website or a new part of the table becomes visible.

My issue is this:
Table is 2 columns per row. This is where the pair of options resides. However, for a user to understand which option to choose I must include a header/question of some kind. I don’t know how one link could open the next pair of options as well as the header. Is there some way to do this???

I solved it this way thus far:
I have a table that i have hidden all rows except for the first one, waiting for user input. then I link to the next row (or appropriate web page). I have included an image, though content is censored (sorry about that). The pink areas are the parts of the table that come up when the site first loads. Unfortunately, the headers for the other parts of the table do too.

What I need:
I need some way for 2 rows to be visible when a user clicks a link in a cell. Or some way for that question to be presented. Any ideas? Thanks in advance.

Picture for the Visually Inclined:

Here’s the relevant parts of the code:
<html>
<head>
<script language=“JavaScript”>
function showCell() {
document.getElementById(‘cellName’).style.visibility=‘visible’;
}
function showCell2() {
document.getElementById(‘cellName2’).style.visibility=‘visible’;
}
function showCell3() {
document.getElementById(‘cellName3’).style.visibility=‘visible’;
}
function showCell4() {
document.getElementById(‘cellName4’).style.visibility=‘visible’;
}

function showCell5(){
document.getElementById(‘cellName5’).style.visibility=‘visible’;
}
function showCell6(){
document.getElementById(‘cellName6’).style.visibility=‘visible’;
}
function DoAllThese12(){
showCell();
showCell2();
}
function DoAllThese34(){
showCell3();
showCell4();
}

</script>

<style type=“text/css”>
#cellName {visibility:hidden; }
#cellName2 {visibility:hidden; }
#cellName3 {visibility:hidden; }
#cellName4 {visibility:hidden; }

td {
width: 50%;
border:0px;
} 
.pane-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pane-list li {
	background: #f9dfec;
	padding: 0px 20px 10px;
	border-top: solid 2px #FF0066;
	cursor: pointer;
}
.pane-list li:hover {
	background: #F6A8B6;
}
.cell-height {
height:50px;
overflow: hidden;
}

</style>

<div id=“table”>
<center>
<table border=“0” id=“table”>
<tr>
<td colspan=“2”>What type …?
</td>
</tr>
<td>
<div class=“cell-height”>
<ul class=“pane-list”>
<li>
<h3>
<a href=“#” onclick=“DoAllThese12()”>
I have …
</a>
</h3>
</li>
</ul>
</div><!–cell-height–>
</td>

			&lt;td&gt;
			&lt;div class="cell-height"&gt;
				&lt;ul class="pane-list"&gt;
					&lt;li&gt;
					&lt;h3&gt;
					&lt;a href="http://www.google.com"&gt;
					&lt;p&gt;
					I have .....&lt;/p&gt;
					&lt;/a&gt;
					&lt;/h3&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;&lt;!--cell-height--&gt;	
			&lt;/td&gt;
		&lt;/tr&gt;

<!------------------------------------Line 2 of Table: Have you had Surgery–>
<tr>
<td colspan=“2”>Have you …?</td>
</tr>
<td id=“cellName”>
<div class=“cell-height”>
<ul class=“pane-list”>
<li>
<h3>
<a href=“http://www.google.com”>No, I have not …</a>
</h3>
</li>
</ul>
</div><!–cell-height–>
</td>
<td id=“cellName2”>
<div class=“cell-height”>
<ul class=“pane-list”>
<li>
<h3>
<a href=“#” onclick=“DoAllThese34()”>Yes, I have …</a>
</h3>
</li>
</ul>
</div><!–cell-height–>
</td>
</tr>