JavaScript Tutorial: Creating Expand/Collapse type of table in HTML and Javascript

jawahar
9/19/2007 5:19:35 AM, Views: 2240

The following tutorial and code can be used if you require an expand/collapse type of table in your web page.

You can copy and paste the code in an editor and save it as a html file and execute it.
Two images are used(+,-) to indicate if the table is in expanded state(-) or collapsed state(+). We dont have the image here, instead you can create one, or browse google to find one.

<html>
<head>
<script language="javascript">
var imgMax = new Image(10,10);
imgMax.src = 'images/max_arrow.gif';
var imgMin = new Image(10,10);
imgMin.src = 'images/min_arrow.gif';

function dyntog(a,thisimg)
{
   if(a.style.display=="none")
   {
      a.style.display="inline";
      thisimg.src=imgMax.src;
   }
   else if(a.style.display=="inline")
   {
      a.style.display="none";
      thisimg.src=imgMin.src;
   }
   return false;
}
</script>
<title>Expand/Collapse the table using DIV</title>
</head>
<body>
<img src="max_arrow.gif" width="10" height="10" border="0" align="absmiddle" style="cursor:hand" onclick="dyntog(tbltog_1,this)" title="Click to Minimize/Maximize the table">
<span id="tbltog_1" style="display:inline">First Line<BR>Second Line<BR></span>
</body>
</html>