Show / Hide Issue

Hi Chaps,
I have a table of data, grouped by Month, Year and then ProjectID:

- Month, Year
- ProjectID
- Job1
- Job2

The Month, Year row controls a collapsable row (ProjectID) and in turn, the ProjectID row controls the Job row(s).

The problem I'm having is that if the Job row(s) is open, then 'close' the Month, Year row, the Job row(s) stay visible. How can I control all 'child' rows from the 'parent' Month, Year control?

      <?php
      $previousProject = '';
	  $previousMonth ='';
	  if ($totalRows_rsInvPending > 0) {
      // Show if recordset not empty
      do {
      if ($previousProject != $row_rsInvPending['projid']) {
	  if ($previousMonth != $row_rsInvPending['themonth']) {
      // for every Project, show the Project ID
	  ?>
      <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>&nbsp;<?php echo $row_rsInvPending['theyear'] ?>&nbsp;-&nbsp;</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="toggle2('proj1<?php echo $row_rsInvPending['projid'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a>&nbsp;<?php echo $row_rsInvPending['projid'] ?>&nbsp;-&nbsp;</a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['projtitle'] ?></em></span></td>
    </tr>
    <?php $previousProject = $row_rsInvPending['projid']; } ?>
    <tr class="proj1<?php echo $row_rsInvPending['projid'] ?>" style="display:none">
        <td><?php echo $row_rsInvPending['jobname']; ?></td>

PHP:

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[i].className == id) {
            matchingElements[matchingElements.length] = elements[i];
         }
      }
   }
   
    for (i = 0; i < matchingElements.length; i++) {
      toggleDisplay(matchingElements[i], 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\">";
   }
}

Code (markup):

 

Try using jquery it would be simpler

 

thanks, how does jquery work?

 

its new age javascript..

 

OK, will check that out, thanks!

 

Try search JS table sorter or something. This work should be done at client side.
It's not necessary, and really feel bad for visitors to wait for page reloading just because they click a "collapse" button.

 

Hi myst_dg, thanks for the reply. . .the javascript is running on the client-side and the page doesn't reload. . . .the collapse function works, but only at one level. . . the parent should always 'hide' any child nodes relating to it, currently only 'hides' the first child node.