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


Expandable and Collapsible HTML tables

Reply
Page 1 of 2 1 2
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 12-07-10, 05:56 AM
tmohani tmohani is offline
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
  #2 (permalink)  
Old 12-08-10, 03:48 AM
phpaid's Avatar
phpaid phpaid is offline
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 12-11-10, 06:57 AM
Icepick.pt's Avatar
Icepick.pt Icepick.pt is offline
Newbie Coder
  
Join Date: Nov 2010
Location: Setúbal, near Lisbon
Posts: 89
Thanks: 3
Thanked 7 Times in 7 Posts
Here you have one other example.

code:
forum.datagen.eu &bull; Ver Tópico - Menu do tipo pull-down em CSS

done deal:
Pull-Down Menus
__________________
You can allways find me at www.datagen.eu
Reply With Quote
The Following User Says Thank You to Icepick.pt For This Useful Post:
tmohani (12-11-10)
  #4 (permalink)  
Old 12-17-10, 09:32 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 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 08-01-11, 01:47 PM
gvannauw gvannauw is offline
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 08-03-11, 01:24 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 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";
    x = 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 09-06-11, 03:15 PM
abhinavcambridge abhinavcambridge is offline
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 09-06-11, 06:23 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 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 09-07-11, 12:41 PM
abhinavcambridge abhinavcambridge is offline
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 09-07-11, 05:46 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 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";
    x = 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
Page 1 of 2 1 2

Bookmarks

Tags
ajax, html, javascript, javascript (ajax)

« for loop variable name issue | AJAX Slide and Fade Content Problem »

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

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 02:04 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.