Show/Hide Issue

[koolsamule]

Hi Chaps, I have a page that contains PHP and Javascript.
I have a table of results, with two grouping stages:

- Month, Year1
- ProjectID1
- Job ID1
- Job ID2
- ProjectID2
- Job ID1
- Month, Year2
- ProjectID3
- Job ID1
- ProjectID4
- Job ID1

The problem is that when the ProjectID row is opened to display the JobID row, then close the Month, Year row, the JobID row remains visible.

Here is the code:
//JAVASCRIPT
function toggle2(id, obj) {
var matchingElements = new Array();

if (document.getElementsByClassName) {
matchingElements = document.getElementsByClassName(id);
} else {
var elements = document.getElementsByTagName("tr");
for (i = 0; i < elements.length; i++) {
if (elements.className == id) {
matchingElements[matchingElements.length] = elements;
}
}
}

for (i = 0; i < matchingElements.length; i++) {
toggleDisplay(matchingElements, obj);
}
}

function toggleDisplay(element, obj) {
if (element.style.display == "none") {
element.style.display = "block";
obj.innerHTML = "<img src=\"../../Images/minus.gif\" border=\"0\">";
} else {
element.style.display = "none";
obj.innerHTML = "<img src=\"../../Images/plus.gif\" border=\"0\">";
}
}
function toggle3(id, obj) {
var matchingElements = new Array();

if (document.getElementsByClassName) {
matchingElements = document.getElementsByClassName(id);
} else {
var elements = document.getElementsByTagName("tr");
for (i = 0; i < elements.length; i++) {
if (elements.className == id) {
matchingElements[matchingElements.length] = elements;
}
}
}

for (i = 0; i < matchingElements.length; i++) {
toggleDisplay(matchingElements, obj);
}
}

function toggleDisplay(element, obj) {
if (element.style.display == "none") {
element.style.display = "block";
obj.innerHTML = "<img src=\"../../Images/minus.gif\" border=\"0\">";
} else {
element.style.display = "none";
obj.innerHTML = "<img src=\"../../Images/plus.gif\" border=\"0\">";
}
}
//PHP
<?php
$previousMonth = '';
if ($totalRows_rsInvPending > 0) {
// Show if recordset not empty
do {
if ($previousMonth != $row_rsInvPending['themonth']) {
// for every Month, show the Month Name
?>
<tr>
<td colspan="18" class="highlight"><span class="blueBold"><a href="#" onclick="toggle2('month1<?php echo $row_rsInvPending['themonth'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a> <?php echo $row_rsInvPending['theyear'] ?> - </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['themonth'] ?></em></span></td>
</tr>
<?php $previousMonth = $row_rsInvPending['themonth']; } ?>
<tr class="month1<?php echo $row_rsInvPending['themonth'] ?>" style="display:none">
<td colspan="20" class="highlight1"><span class="blueBold"><a href="#" onclick="toggle3('proj1<?php echo $row_rsInvPending['projid'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a> <?php echo $row_rsInvPending['projid'] ?> - </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['projtitle'] ?></em></span></td>
</tr>
<tr class="proj1<?php echo $row_rsInvPending['projid'] ?>" style="display:none">
<td><?php echo $row_rsInvPending['jobname']; ?></td>
<td><?php echo $row_rsInvPending['projtype']; ?></td>