Embedded Expanding/Collapsing Component

Made this a few years ago. Is it good code? It lets you have multiple expanding/collapsing components on your page running from the same .js, WITHOUT having to have any specific ids or class names on your components.

EDIT: There is another thing, you have to add the little void javascript thing to the image button(you're sending the image location to the script) and have an id name, but they can all be the same name is why I wrote it. Basically lets you just copy and paste the component once you've made one, and not have to get into the code on the new ones.

I made it for tables, so I'm curious if this works with css layouts too. It was cross-browser back then, but who knows now, haven't checked.

function getBody(image){
	table = image.parentNode.parentNode.parentNode.parentNode;
	children = table.childNodes;
	max = children.length;
	for(i = 0; i < max; i++){
		grandchild = children[i];
		grandchildren = grandchild.childNodes;
		grandmax = grandchildren.length;
		for(i2 = 0; i2 < grandmax; i2++){
			greatgrandchild = grandchildren[i2];
			if(greatgrandchild.id){
				if(greatgrandchild.id.substring(0,11) == "collapsable"){
					return greatgrandchild;
				}
			}
		}
	}
}

function expandBox(source){
	body = getBody(source);
	if (body.style.display == "none"){
		body.style.display = "";
	}
	else {
		body.style.display = "none";
	}
}

Code (markup):

And here is the html that a sample expanding box would use:

				<table width="133" cellpadding="0" cellspacing="0">
				<tr>
					<td width="133" height="5" colspan="3">
						<img src="images/layout/spacer.gif" width="133" height="5" /></td>
				</tr>
				<tr>
					<td width="133" height="11" colspan="3">
						<img src="images/layout/sub-left-layout/layout1_57.jpg" width="133" height="11" /></td>
				</tr>
				<tr>
					<td width="5">
						<img src="images/layout/sub-left-layout/layout1_49.jpg" width="5" height="22" /></td>
					<td width="107" class="v_nav_title">
						Learn More</td>
					<td width="21" height="22">
						<a href="javascript:void(0);">
						<img src="images/layout/sub-left-layout/layout1_62.jpg" width="21" height="22" border="0" onclick="expandBox(this)" /></a></td>
				</tr>
				<tr>
					<td id="collapsable" width="133" colspan="3" valign="top" class="info-body">
						<p>If you would like to know more about us, or if you 
						have any questions or comment, please contact us.</td>
				</tr>
				<tr>
					<td width="133" height="11" colspan="3">
						<a href="contact_us.htm">
						<img src="images/layout/sub-left-layout/layout1_59.jpg" width="133" height="11" border="0" /></a></td>
				</tr>
				<tr>
					<td width="133" height="11" colspan="3">
						<img src="images/layout/sub-left-layout/layout1_60.jpg" width="133" height="11" /></td>
				</tr>
				</table>

Code (markup):

Feel free to use it too.

Thanks,
SolutionX