Expand and Collapse All Dynamic Table Rows

[ainoy31]

I am able to get the table rows to expand and collapse when someone clicks on the (+/-) icon next to each rows.  Now, I am needing to add the festure to expand and collapse all the rows. 

 

Here is my javascript:

function ToggleVisibility(id,toggler) {
var e = document.getElementById(id);
var f = document.getElementById(toggler);
if(e.style.display == '')
{
	e.style.display = 'none';
}
else
{
	e.style.display = '';
		}
	if(f.className == 'Toggler Expand')
{
	f.className = "Toggler Collapse";
	f.style.backgroundImage = "url(/admin/images/icon_minus.gif)";
}
else
{
	f.className = "Toggler Expand";
	f.style.backgroundImage = "url(/admin/images/icon_plus.gif)";
}
}

 

Here is the UI code of it:

<a style="text-decoration: none" href="#" onclick="ToggleVisibility('detail', 'toggler')">Expand All</a>   |   <a style="text-decoration: none" href="#" onclick="ToggleVisibility('detail', 'toggler')">Collapse All</a>
<br>

<div class="SectionBlock Heavy">
<span class="Spacer">  </span>
<div class="Container DataTable Tree">
<table class="Data Tree" width="99%" border="1">
<tr align="left">
	<th width="75"> </th>
	<th width="125">State</th>
	<th width="150">Local Jurisdiction</th>
	<th width="100">File Online</th>
	<th width="150">Requires Notarization</th>
	<th width="150">Requires Publication</th>
	<th width="150">We Don't File Here</th>
</tr>
  
<?php

while($row=mysql_fetch_array($result))
{
global $STATES;
extract($row);
?>

<tr>
	<td><a style="text-decoration: none" href="#" onclick="ToggleVisibility('detail<?=$stateid;?>', 'toggler<?=$stateid;?>'); return false;"><img src="../../images/point.gif" id="toggler<?=$stateid;?>" style="border-color:white" class="Toggler Expand" alt=""></a>     
	    <a style="text-decoration:none" href="javascript:void(0);" onclick="window.open('edit_state_procedure.php?s=<?=$stateid;?>', '', 'width=800, height=1000, scrollbars=no')" href='' class='CT'><img src="../../images/edit.png" style="border:white; font: 8px;" alt="Edit"></a></td>
	<td><? printf("%s (%s)", $STATES[$stateid], $stateid)?></td>
<?

$data=$db->getStateDBARule($stateid);

while($rows=mysql_fetch_assoc($data))
{

	extract($rows);
	if($file_online == 1){ $online = "X";}else{ $online = "";}
	if($notarization == 1){ $note = "X";}else{ $note = "";}
	if($publication ==  1){ $public = "X";}else{ $public = "";}
	if($file_here == 1){ $here = "X";}else{ $here = "";}
?>	
	<td><?=$local_jurisdiction_type;?> </td>
	<td><?=$online;?> </td>
	<td><?=$note;?> </td>
	<td><?=$public;?> </td>
	<td><?=$here;?> </td> 
</tr>
<tr class="Supplement" id="detail<?=$stateid;?>" style="display:none;">
	<td colspan="7" class="DataTableBranchContainer">
		<table width="100%" border="0" class="Data Tree">
			<tr>
			<?

			$info=$db->getJurisRule($stateid);

			while($row=mysql_fetch_assoc($info))
			{
				extract($row);
				if($file_online == 1){ $online = "X";}else{ $online = "";}
				if($notarization == 1){ $note = "X";}else{ $note = "";}
				if($publication ==  1){ $public = "X";}else{ $public = "";}
				if($file_here == 1){ $here = "X";}else{ $here = "";}
				if($jurisdiction_type=="City")
				{
					$id="City";
				}
				if($jurisdiction_type=="County")
				{
					$id="County";	
				}?>
					<tr>
						<td id="<?=$id;?>" width="137px"><a style="text-decoration:none" onclick="window.open('delete_local_juris.php?cc=<?=$ccid?>&st=<?=$stateid?>&del=yes', '', 'width=400, height=400, scrollbars=no')" class='CT'><img src="../../images/cross.png" alt="delete" style="border-color:#95FE3F"></a>     <a style="text-decoration:none" href="javascript:void(0);" onclick="window.open('edit_local_juris.php?cc=<?=$ccid?>&st=<?=$stateid?>', '', 'width=800, height=1000, scrollbars=no')" class='CT'><img src="../../images/edit.png" style="border:#95FE3F; font: 8px;" alt="Edit"></a> </td>
						<td id="<?=$id;?>" width="225px"><? printf("%s (%s)", $STATES[$stateid], $stateid)?></td>
						<td id="<?=$id;?>" width="265px"><?=$jurisdiction_name;?></a> </td>
						<td id="<?=$id;?>" width="183px"><?=$online;?> </td>
						<td id="<?=$id;?>" width="265px"><?=$note;?> </td>
						<td id="<?=$id;?>" width="265px"><?=$public;?> </td>
						<td id="<?=$id;?>"><?=$here;?> </td> 
					</tr>
		      <?}?>
			</tr>
		</table>
	</td>
</tr>
<?php
}//end of while($rows=mysql_fetch_assoc($data))
}//end of while($row=mysql_fetch_array($result))
?>
</table>
</div>
</div>

 

Hope this is clear enough.  Much appreciation on this.  AM

[Ken2k7]

Would that be the same as toggling the entire table?

[ainoy31]

Are you seriously man??  Are you one of those programmers that can't hack in the real world and can only hide behind teaching programming 101 at a community college.  Either be helpful or jump in front of a train man.