//**************************************
//     
// Name: Toggle child rows in HTML table
//     [Expanding divs]
// Description:DHTML method of expanding
//     / contracting divs. Seen all the time in
//     DHTML menus but in this case used to exp
//     and
a child row of further details for a customer details grid. Very easy to use within a dynamic page, just create a unique div ID
with an incrementing variable for each row and the clientside function handles the rest . IE4 +
// By: Simon Goodwin
//
//This code is copyrighted and has// limited warranties.Please see http://
//     www.Planet-Source-Code.com/vb/scripts/Sh
//     owCode.asp?txtCodeId=3600&lngWId;=2//for details.//**************************************
//     

// <!-- function used to expand / clo
//     se the content within a div -->

    function toggle(element,tog) {
        if (element.style.display == 'none') {
        element.style.display = 'block';
        tog.innerHTML = '-';
        } else {

        element.style.display = 'none';
        tog.innerHTML = '+';
    }

}

//<!-- HTML required for example --&g;
//     t;
<TABLE border="1">
	<!-- parent row -->
	<TR>
	<!-- toggle cell -->
	<TD align="center" width=10>
		<span id="t1" onclick="toggle(m1,this);">
		<B>+</B>
		</span>
	</TD>
	<!-- end toggle cell -->
	<!-- summary data -->
		<TD>Customer name</TD>
		<TD>Reseller name</TD>
		<TD>Country</TD>
	<!-- End sumary data -->
	</TR>
	<!-- End Parent row -->
	<!-- Expanding [child] cell -->
	<TR>
		<TD colspan="2"></TD>
		<TD colspan="2">
			<!-- div content // id called in toggle call in row above [unique] -->
			<DIV id="m1" style="display: none;">
				<!-- details table -->	
				<TABLE cellpadding="0" ID="Table1">
					<TR>
						<TD>10 Main Street</TD>
					</TR>
					<TR>
						<TD>Reading</TD>
					</TR>
					<TR>
						<TD>Hants</TD>
					</TR>
				</TABLE>
				<!--end details table -->
			</DIV>
			<!-- End Div content -->
		</TD>
	</TR>
	<!-- End Expanding cell -->
</TABLE>