Hello Everyone.

I have a bit of an issue trying to get one link to open more than one link at a time. Perhaps you can either help me or suggest a better way to do so.

I have created a table with hidden rows until a user clicks an open in either cell. Once the user clicks a cell, the next row of opens opens up.

What I am having trouble with is getting the table headings to be opened once hidden. Each set of options needs a title or question for the user to understand what choices to make. (these are the td's with colspan of 2)

I am using javascript to show and hide the cells I have so far, and I can hide them just fine, I just want to show both sets of cells once the user clicks one link. its a bit complicated because i have functions all over the place

Any help you give me would be greatly appreciated. Alternatively, I can be reached on Y!: tmdela

Here's 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();
showCellHeader();
}
function DoAllThese34(){
showCell3();
showCell4();
}
function DoAllThese56(){
showCell5();
showCell6();
}
</script>


<!--------------------------------CSS begins here, hides the table-->
<style type="text/css">
#cellName {visibility:hidden; }
#cellName2 {visibility:hidden; }
#cellName3 {visibility:hidden; }
#cellName4 {visibility:hidden; }
#cellName5 {visibility:hidden; }
#cellName6 {visibility:hidden; }
body{
font-family:Arial, Calibri, Sans-serif;
font-size: 15px;
}
a{
font-family: Arial, Calibri, Sans-Serif;
font-size: 11px;
color:#000;
}
a:link{text-decoration:none}
a:visited{text-decoration:none; color:#000;}
a:active{text-decoration:none}
a:hover{text-decoration:none;}

a:visited {
color: #000;
}
#container{
position:absolute;
margin:0 auto;
left: 30%;
top:0px;
}
#maincontent{
width: 420px;
margin: 0 auto;
}
#table{
margin:0 auto;
width: 450px;
}
td {
width: 50%;
border:0px;
}
.pane-list {
margin: 0;
padding: 0;
list-style: none;
}
.pane-list li {
background: #f9dfec;
padding: 10px 20px 2px;
border-top: solid 2px #FF0066;
cursor: pointer;
}
.pane-list li:hover {
background: #F6A8B6;
}


</style>
</head>

<!--------------------------------------------body-->
<body>
<div id="container">
<div id="maincontent">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</h3>
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesuaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua
</p>
<BR>
</div><!--maincontent-->

<!-------------------------------------Container for table-->
<div id="menu">

<!-------------------------------------Line 1 of table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?-->
<div id="table">
<center>
<table border="0" id="table">
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?
</td>
</tr>
<td>
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick="DoAllThese12()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</p>
</a>
</h3>
</li>
</ul>
</td>
<td>
<ul class="pane-list">
<li>
<h3>
<a href="http://www.google.com">My cancer has spread.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</p>
</a>
</h3>
</li>
</ul>
</td>
</tr>

<!------------------------------------Line 2 of Table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua-->
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?
</td>
</tr>
<td id="cellName">
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick="DoAllThese34()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>
<td id="cellName2">
<ul class="pane-list">
<li>
<h3>
<a href="http://www.google.com">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>
</tr>

<!------------------------------------Line 3 of Table: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua-->
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua?
</td>
</tr>
<tr>
<td id="cellName3">
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick='DoAllThese56()'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>

<td id="cellName4">
<ul class="pane-list">
<li>
<h3>
<a href="#" onclick="DoAllThese56()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante eu nunc aliquet malesua</a>
</h3>
</li>
</ul>
</td>
</tr>

</table>
</center>
</div><!--table-->
</div><!--menu-->
</div><!--container-->
</body>
</html>