Current location: Hot Scripts Forums » General Web Coding » JavaScript » Expandable and Collapsible HTML tables

Expandable and Collapsible HTML tables

Reply
  #1 (permalink)  
Old
New Member
 
Join Date: Dec 2010
Posts: 1
Thanks: 3
Thanked 0 Times in 0 Posts
Question Expandable and Collapsible HTML tables

HTML Code:
<HTML>
<HEAD>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">

function toggle_visibility(tbid,lnkid) {
if (document.getElementsByTagName) {
  var tables = document.getElementsByTagName('table');
  for (var i = 0; i < tables.length; i++) {
   if (tables[i].id == tbid){
     var trs = tables[i].getElementsByTagName('tr');
     for (var j = 2; j < trs.length; j+=1) {
     trs[j].bgcolor = '#CCCCCC';
       if(trs[j].style.display == 'none') 
          trs[j].style.display = '';
       else 
          trs[j].style.display = 'none';
    }
   }
  }
 }
   var x = document.getElementById(lnkid);
   if (x.innerHTML == '[+] Expand ')
      x.innerHTML = '[-] Collapse ';
   else 
      x.innerHTML = '[+] Expand ';
}
</script>

<style type="text/css">
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>

</head>

<BODY>
    <table width="800" border="0" align="center" cellpadding="4" cellspacing="0" id="tbl1" name="tbl1">
        <tr><td height="1" bgcolor="#727272" colspan="3"></td></tr>
        <tr bgcolor="#EEEEEE"><td height="15" colspan="2"> <strong>Project name 1</strong></td>
            <td bgcolor="#EEEEEE"><a href="javascript:toggle_visibility('tbl1','lnk1');">
            <div align="right" id="lnk1" name="lnk1">[+] Expand </div></a></td></tr>
        <tr style="{display='none'}"><td colspan="3"><div align="left">Short summary which describes Project 1.</div></td></tr>
        <tr style="{display='none'}" bgcolor="#EEEEEE"><td width="70%">File Name</td><td width="15%">Size</td><td  width="15%"></td></tr>

            <tr style="{display='none'}"><td>Document 1 of the project 1.doc</td><td>209.5 KB</td><td><a href="#">Download</a></td></tr>
            <tr style="{display='none'}"><td colspan="3" bgcolor="#CCCCCC" height="1"></td></tr>

            <tr style="{display='none'}"><td>Document 2 of the project 1.doc</td><td>86 KB</td><td><a href="#">Download</a></td></tr>
            <tr style="{display='none'}"><td colspan="3" bgcolor="#CCCCCC" height="1"></td></tr>

            <tr style="{display='none'}"><td>Document 3 of the project 1.doc</td><td>325.5 KB</td><td><a href="#">Download</a></td></tr>
            <tr style="{display='none'}"><td colspan="3" bgcolor="#CCCCCC" height="1"></td></tr>

            <tr style="{display='none'}"><td height="1" bgcolor="#CCCCCC" colspan="3"></td></tr>
            <tr style="{display='none'}"><td height="1" bgcolor="#727272" colspan="3"></td></tr>

            <tr style="{display='none'}"><td height="8" colspan="3"></td></tr>
     </table>

    <table width="800" border="0" align="center" cellpadding="4" cellspacing="0" id="tbl2" name="tbl2">
        <tr><td height="1" bgcolor="#727272" colspan="3"></td></tr>
        <tr bgcolor="#EEEEEE"><td height="15" colspan="2"> <strong>Project name 2</strong></td>
            <td bgcolor="#EEEEEE"><a href="javascript:toggle_visibility('tbl2','lnk2');">
            <div align="right" id="lnk2" name="lnk2">[+] Expand </div></a></td></tr>
        <tr style="{display='none'}"><td colspan="3"><div align="left">Short summary which describes Project 2.</div></td></tr>
        <tr style="{display='none'}" bgcolor="#EEEEEE"><td width="70%">File Name</td><td width="15%">Size</td><td  width="15%"></td></tr>

            <tr style="{display='none'}"><td>Document 1 of the project 2.doc</td><td>209.5 KB</td><td><a href="#">Download</a></td></tr>
            <tr style="{display='none'}"><td colspan="3" bgcolor="#CCCCCC" height="1"></td></tr>

            <tr style="{display='none'}"><td>Document 2 of the project 2.doc</td><td>86 KB</td><td><a href="#">Download</a></td></tr>
            <tr style="{display='none'}"><td colspan="3" bgcolor="#CCCCCC" height="1"></td></tr>

            <tr style="{display='none'}"><td height="1" bgcolor="#CCCCCC" colspan="3"></td></tr>
            <tr style="{display='none'}"><td height="1" bgcolor="#727272" colspan="3"></td></tr>

            <tr style="{display='none'}"><td height="8" colspan="3"></td></tr>
     </table>
</body>
</html>
================================================== ============

I want the tables to start out as collapsed. When i use the above script they already display as expanded. What code can i insert to make them hidden and then show when expand is clicked. Thanks for your time and help.

Last edited by Nico; 12-07-10 at 05:59 AM.
Reply With Quote

Featured Marketplace Scripts (view more)

  #2 (permalink)  
Old
phpaid's Avatar
Newbie Coder
 
Join Date: Nov 2010
Location: Northwest USA
Posts: 38
Thanks: 0
Thanked 4 Times in 4 Posts
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
	document.cestatus = 0;
	function cecontrol(id){
		if(document.cestatus == 0){
			document.getElementById(id).style.display = "block";
			document.cestatus = 1;
		}else{
			document.getElementById(id).style.display = "none";
			document.cestatus = 0;
		}
	}
	cecontrol("row");
</script>
<style type="text/css">
	#row{display:none;}
</style>
</head>

<body>
<button onclick="cecontrol('row')">-/+</button>
<table id="row" >
	<tr >
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr >
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>
</body>
</html>
Basic idea is there you can hammer out details.
__________________
PHP AID - PHP Scripts, News, PHP Downloads, All Free
Reply With Quote
The Following User Says Thank You to phpaid For This Useful Post:
tmohani (12-09-10)
  #3 (permalink)  
Old
Icepick.pt's Avatar
Newbie Coder
 
Join Date: Nov 2010
Location: Setúbal, near Lisbon
Posts: 96
Thanks: 3
Thanked 7 Times in 7 Posts
__________________
You can allways find me at www.datagen.eu, I own it.
And if you are hiring, I 'm all ears, now.
Reply With Quote
The Following User Says Thank You to Icepick.pt For This Useful Post:
tmohani (12-11-10)
  #4 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Let's simplify things a little.
HTML Code:
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
  if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
  else{document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";}
  document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
 }
</script>
<style type="text/css">
#tbl1,#tbl2 {display:none;}
#lnk1,#lnk2 {border:none;background:none;width:85px;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
 <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
  <tr height="1">
   <td bgcolor="#727272" colspan="3"></td>
  </tr>
  <tr bgcolor="#EEEEEE" height="15">
   <td><strong>Project name 1</strong></td>
   <td></td>
   <td bgcolor="#EEEEEE" align="right"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1">
     <tr>
      <td colspan="3">Short summary which describes Project 1.</td>
     </tr>
     <tr bgcolor="#EEEEEE">
      <td width="70%">File Name</td>
      <td width="15%">Size</td>
      <td  width="15%"></td>
     </tr>
     <tr>
      <td>Document 1 of the project 1.doc</td>
      <td>209.5 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr>
      <td>Document 2 of the project 1.doc</td>
      <td>86 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr>
      <td>Document 3 of the project 1.doc</td>
      <td>325.5 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr height="1">
      <td bgcolor="#CCCCCC" colspan="3"></td>
     </tr>
     <tr height="1">
      <td bgcolor="#727272" colspan="3"></td>
     </tr>
     <tr height="8">
      <td colspan="3"></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
 <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
  <tr height="1">
   <td bgcolor="#727272" colspan="3"></td>
  </tr>
  <tr bgcolor="#EEEEEE" height="15">
   <td colspan="2"><strong>Project name 2</strong></td>
   <td bgcolor="#EEEEEE" align="right"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl2" name="tbl2">
     <tr>
      <td colspan="3">Short summary which describes Project 2.</td>
     </tr>
     <tr bgcolor="#EEEEEE">
      <td width="70%">File Name</td>
      <td width="15%">Size</td>
      <td  width="15%"></td>
     </tr>
     <tr>
      <td>Document 1 of the project 2.doc</td>
      <td>209.5 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr>
      <td>Document 2 of the project 2.doc</td>
      <td>86 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC" ></td>
     </tr>
     <tr height="1">
      <td bgcolor="#CCCCCC" colspan="3"></td>
     </tr>
     <tr height="1">
      <td bgcolor="#727272" colspan="3"></td>
     </tr>
     <tr height="8">
      <td colspan="3"></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</body>
</html>
__________________
Jerry Broughton

Last edited by job0107; 12-17-10 at 11:27 PM.
Reply With Quote
The Following 2 Users Say Thank You to job0107 For This Useful Post:
rsardinas (02-06-12), tmohani (12-18-10)
  #5 (permalink)  
Old
New Member
 
Join Date: Aug 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
thanks

Thanks for the great script. This in fact is what I have been searching for. One question though, is it possible via javascript to collapse the other table when another one is expanded, i.e. suppose you have two tables (like in the example), you expand the first one. Now say that you want to expand the second one, then the first one should automatically collapse again.. Not sure that this is at all possible, but I am turning to the guru's here who might have a solution??
Reply With Quote
  #6 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Quote:
Originally Posted by gvannauw View Post
Thanks for the great script. This in fact is what I have been searching for. One question though, is it possible via javascript to collapse the other table when another one is expanded, i.e. suppose you have two tables (like in the example), you expand the first one. Now say that you want to expand the second one, then the first one should automatically collapse again.. Not sure that this is at all possible, but I am turning to the guru's here who might have a solution??
I think this is probably what you are looking for.
PHP Code:

<html>
<
head>
<
TITLE>Expandable and collapsible table demo</TITLE>
<
script type="text/javascript">
function 
toggle_visibility(tbid,lnkid)
{
  var 
obj document.getElementsByTagName("table");
  for(
i=0;i<obj.length;i++)
  {
   if(
obj[i].id && obj[i].id != tbid)
   {
    
document.getElementById(obj[i].id).style.display "none";
    
obj[i].id.substring(3);
    
document.getElementById("lnk"+x).value "[+] Expand";
    }
   }
  if(
document.all){document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "block" "none" "block";}
  else{
document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "table" "none" "table";}
  
document.getElementById(lnkid).value document.getElementById(lnkid).value == "[-] Collapse" "[+] Expand" "[-] Collapse";
 }
</script>
<style type="text/css">
.tbl {display:none;}
.lnk {border:none;background:none;width:85px;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
 <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
  <tr height="1">
   <td bgcolor="#727272" colspan="3"></td>
  </tr>
  <tr bgcolor="#EEEEEE" height="15">
   <td><strong>Project name 1</strong></td>
   <td></td>
   <td bgcolor="#EEEEEE" align="right"><input class="lnk" id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1" class="tbl">
     <tr>
      <td colspan="3">Short summary which describes Project 1.</td>
     </tr>
     <tr bgcolor="#EEEEEE">
      <td width="70%">File Name</td>
      <td width="15%">Size</td>
      <td  width="15%"></td>
     </tr>
     <tr>
      <td>Document 1 of the project 1.doc</td>
      <td>209.5 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr>
      <td>Document 2 of the project 1.doc</td>
      <td>86 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr>
      <td>Document 3 of the project 1.doc</td>
      <td>325.5 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr height="1">
      <td bgcolor="#CCCCCC" colspan="3"></td>
     </tr>
     <tr height="1">
      <td bgcolor="#727272" colspan="3"></td>
     </tr>
     <tr height="8">
      <td colspan="3"></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
 <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
  <tr height="1">
   <td bgcolor="#727272" colspan="3"></td>
  </tr>
  <tr bgcolor="#EEEEEE" height="15">
   <td colspan="2"><strong>Project name 2</strong></td>
   <td bgcolor="#EEEEEE" align="right"><input class="lnk" id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl2" name="tbl2" class="tbl">
     <tr>
      <td colspan="3">Short summary which describes Project 2.</td>
     </tr>
     <tr bgcolor="#EEEEEE">
      <td width="70%">File Name</td>
      <td width="15%">Size</td>
      <td  width="15%"></td>
     </tr>
     <tr>
      <td>Document 1 of the project 2.doc</td>
      <td>209.5 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr>
      <td>Document 2 of the project 2.doc</td>
      <td>86 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC" ></td>
     </tr>
     <tr height="1">
      <td bgcolor="#CCCCCC" colspan="3"></td>
     </tr>
     <tr height="1">
      <td bgcolor="#727272" colspan="3"></td>
     </tr>
     <tr height="8">
      <td colspan="3"></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
 <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
  <tr height="1">
   <td bgcolor="#727272" colspan="3"></td>
  </tr>
  <tr bgcolor="#EEEEEE" height="15">
   <td colspan="2"><strong>Project name 3</strong></td>
   <td bgcolor="#EEEEEE" align="right"><input class="lnk" id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl3" name="tbl3" class="tbl">
     <tr>
      <td colspan="3">Short summary which describes Project 3.</td>
     </tr>
     <tr bgcolor="#EEEEEE">
      <td width="70%">File Name</td>
      <td width="15%">Size</td>
      <td  width="15%"></td>
     </tr>
     <tr>
      <td>Document 1 of the project 3.doc</td>
      <td>209.5 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC"></td>
     </tr>
     <tr>
      <td>Document 2 of the project 3.doc</td>
      <td>86 KB</td>
      <td><a href="#">Download</a></td>
     </tr>
     <tr height="1">
      <td colspan="3" bgcolor="#CCCCCC" ></td>
     </tr>
     <tr height="1">
      <td bgcolor="#CCCCCC" colspan="3"></td>
     </tr>
     <tr height="1">
      <td bgcolor="#727272" colspan="3"></td>
     </tr>
     <tr height="8">
      <td colspan="3"></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</body>
</html> 
__________________
Jerry Broughton
Reply With Quote
  #7 (permalink)  
Old
New Member
 
Join Date: Sep 2011
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Exclamation Not working

Hi Jerry,

I have tried using your code, but it does not work for me.
When I try it on Tryit Editor v1.4, it works fine, but when I try and place it on my website, it again comes out expanded.

Pleas advice,
Abhinav
Reply With Quote
  #8 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Quote:
Originally Posted by abhinavcambridge View Post
Hi Jerry,

I have tried using your code, but it does not work for me.
When I try it on Tryit Editor v1.4, it works fine, but when I try and place it on my website, it again comes out expanded.

Pleas advice,
Abhinav
You will have to post your code so I can see what you are doing if you want me to help you.
__________________
Jerry Broughton
Reply With Quote
  #9 (permalink)  
Old
New Member
 
Join Date: Sep 2011
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Question Thanks so much for replying so quickly!

Quote:
Originally Posted by job0107 View Post
You will have to post your code so I can see what you are doing if you want me to help you.
I am sorry Jerry. My fault. This is the code I am using. My website is pretty old and I suspect its working on the older version of HTML. I am not a developer but a marketing guy.. Trying to build a website to confirm my job. I am so grateful to all developers posting their creations online.

PHP Code:

<html>

<
head>
<
TITLE>Expandable and collapsible table demo</TITLE>
<
script type="text/javascript">
function 
toggle_visibility(tbid,lnkid)
{
  if(
document.all){document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "block" "none" "block";}
  else{
document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "table" "none" "table";}
  
document.getElementById(lnkid).value document.getElementById(lnkid).value == "[-] Collapse" "[+] Expand" "[-] Collapse";
 }
</script>
<style type="text/css">
#tbl1,#tbl2 {display:none;}
#lnk1,#lnk2 {border:none;background:none;width:85px;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>

<body>
 <table width="772px" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong></font></td>
   <td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
     <tr>
      <td width="5%"></td>
      <td width="45%">Product Code</td>
      <td width="50%" align="center">XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Biometric Devices</td>
      <td width="50%" align="center">Four XXXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Control Devices</td>
      <td width="50%" align="center">Two XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Proximity Cards</td>
      <td width="50%" align="center">XXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Power Supply</td>
      <td width="50%" align="center">One XXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Software</td>
      <td width="50%" align="center">One XXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Communication</td>
      <td width="50%" align="center">One XXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Installation Manual</td>
      <td width="50%" align="center">One XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Quick Look</td>
      <td width="50%" align="center">Picture 1</td>
    </table>
   </td>
  </tr>
 </table>

 <table width="772px" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="15">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong></font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
     <tr>
      <td width="5%"></td>
      <td width="45%">Product Code</td>
      <td width="50%" align="center">YYYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Biometric Devices</td>
      <td width="50%" align="center">Four YYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Control Devices</td>
      <td width="50%" align="center">Two YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Proximity Cards</td>
      <td width="50%" align="center">YYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Power Supply</td>
      <td width="50%" align="center">One YYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Software</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Communication</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Installation Manual</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Quick Look</td>
      <td width="50%" align="center">Picture 2</td>
     </tr>
    </table>
   </td>
  </tr>
 </table>

</body>
</html> 

Last edited by abhinavcambridge; 09-07-11 at 12:43 PM. Reason: Added PHP tags
Reply With Quote
  #10 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Quote:
Originally Posted by abhinavcambridge View Post
I am sorry Jerry. My fault. This is the code I am using. My website is pretty old and I suspect its working on the older version of HTML. I am not a developer but a marketing guy.. Trying to build a website to confirm my job. I am so grateful to all developers posting their creations online.

PHP Code:

<html>
<
head>
<
TITLE>Expandable and collapsible table demo</TITLE>
<
script type="text/javascript">
function 
toggle_visibility(tbid,lnkid)
{
  if(
document.all){document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "block" "none" "block";}
  else{
document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "table" "none" "table";}
  
document.getElementById(lnkid).value document.getElementById(lnkid).value == "[-] Collapse" "[+] Expand" "[-] Collapse";
 }
</script>
<style type="text/css">
#tbl1,#tbl2 {display:none;}
#lnk1,#lnk2 {border:none;background:none;width:85px;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>

<body>
 <table width="772px" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong></font></td>
   <td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
     <tr>
      <td width="5%"></td>
      <td width="45%">Product Code</td>
      <td width="50%" align="center">XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Biometric Devices</td>
      <td width="50%" align="center">Four XXXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Control Devices</td>
      <td width="50%" align="center">Two XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Proximity Cards</td>
      <td width="50%" align="center">XXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Power Supply</td>
      <td width="50%" align="center">One XXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Software</td>
      <td width="50%" align="center">One XXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Communication</td>
      <td width="50%" align="center">One XXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Installation Manual</td>
      <td width="50%" align="center">One XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Quick Look</td>
      <td width="50%" align="center">Picture 1</td>
    </table>
   </td>
  </tr>
 </table>

 <table width="772px" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="15">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong></font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
     <tr>
      <td width="5%"></td>
      <td width="45%">Product Code</td>
      <td width="50%" align="center">YYYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Biometric Devices</td>
      <td width="50%" align="center">Four YYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Control Devices</td>
      <td width="50%" align="center">Two YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Proximity Cards</td>
      <td width="50%" align="center">YYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Power Supply</td>
      <td width="50%" align="center">One YYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Software</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Communication</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Installation Manual</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Quick Look</td>
      <td width="50%" align="center">Picture 2</td>
     </tr>
    </table>
   </td>
  </tr>
 </table>

</body>
</html> 
You didn't follow through with the posts and grab the updated version.
I have tested this code in FireFox and IE.
PHP Code:

<html>
<
head>
<
TITLE>Expandable and collapsible table demo</TITLE>
<
script type="text/javascript">
function 
toggle_visibility(tbid,lnkid)
{
  var 
obj document.getElementsByTagName("table");
  for(
i=0;i<obj.length;i++)
  {
   if(
obj[i].id && obj[i].id != tbid)
   {
    
document.getElementById(obj[i].id).style.display "none";
    
obj[i].id.substring(3);
    
document.getElementById("lnk"+x).value "[+] Expand";
    }
   }
  if(
document.all){document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "block" "none" "block";}
  else{
document.getElementById(tbid).style.display document.getElementById(tbid).style.display == "table" "none" "table";}
  
document.getElementById(lnkid).value document.getElementById(lnkid).value == "[-] Collapse" "[+] Expand" "[-] Collapse";
 }
</script>
<style type="text/css">
#tbl1,#tbl2 {display:none;}
#lnk1,#lnk2 {border:none;background:none;width:85px;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>

<body>
 <table width="772px" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong></font></td>
   <td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
     <tr>
      <td width="5%"></td>
      <td width="45%">Product Code</td>
      <td width="50%" align="center">XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Biometric Devices</td>
      <td width="50%" align="center">Four XXXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Control Devices</td>
      <td width="50%" align="center">Two XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Proximity Cards</td>
      <td width="50%" align="center">XXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Power Supply</td>
      <td width="50%" align="center">One XXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Software</td>
      <td width="50%" align="center">One XXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Communication</td>
      <td width="50%" align="center">One XXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Installation Manual</td>
      <td width="50%" align="center">One XXXXXXX</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Quick Look</td>
      <td width="50%" align="center">Picture 1</td>
    </table>
   </td>
  </tr>
 </table>

 <table width="772px" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="15">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong></font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
     <tr>
      <td width="5%"></td>
      <td width="45%">Product Code</td>
      <td width="50%" align="center">YYYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Biometric Devices</td>
      <td width="50%" align="center">Four YYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Control Devices</td>
      <td width="50%" align="center">Two YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Proximity Cards</td>
      <td width="50%" align="center">YYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Power Supply</td>
      <td width="50%" align="center">One YYYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Software</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Communication</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Installation Manual</td>
      <td width="50%" align="center">One YYYYYY</td>
     </tr>
     <tr>
      <td width="5%"></td>
      <td width="45%">Quick Look</td>
      <td width="50%" align="center">Picture 2</td>
     </tr>
    </table>
   </td>
  </tr>
 </table>

</body>
</html> 
__________________
Jerry Broughton
Reply With Quote
Reply

Bookmarks

Tags
ajax, html, javascript, javascript (ajax)


Currently Active Users Viewing This Thread: 3 (0 members and 3 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump


All times are GMT -5. The time now is 08:04 AM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.