Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Collapsing/Expanding menu code

    So i was wondering how to make a collapsing menu code work. I have the code itself that uses javascript but what i need to do is put a table in the collapsing/expanding menu. As many of you probably know that tables dont work in <script></script> so i need a way around that.
    This is the menu code i have and need to work around. If any of you have a code to go around this i will really appreciate it. Please email me at roman_sf@yahoo.com if you have any information.
    Thanks.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Consider this ...

    Is this what you are after?
    PHP Code:
    <html>
    <
    head>
    <
    title>Menu with table</title>
    <
    style type="text/css">
     .
    menuTable display:nonewidth:200px; }
    </
    style>

    <
    script type="text/javascript">
    function 
    Toggle(Info) {
      var 
    CState document.getElementById(Info);
      if (
    CState.style.display == '') { CState.style.display 'none'; }
      if (
    CState.style.display == "none") { CState.style.display "block"; }
                                     else { 
    CState.style.display "none"; }
    }
    </script>

    </head>
    <body>
    <h1>Menu with tables</h1>
    <div id="menu">
     <a href='#' onclick="Toggle('sub1')">Table1</a><br>
     <div class='menuTable' id='sub1'>
      <table border="1" style="background-color:red;color:black"><tr>
       <td>Table1 RC:00</td>
       <td>Table1 RC:01</td>
       <td>Table1 RC:02</td>
      </tr><tr>
       <td>Table1 RC:10</td>
       <td>Table1 RC:11</td>
       <td>Table1 RC:12</td>
      </tr><tr>
       <td>Table1 RC:20</td>
       <td>Table1 RC:21</td>
       <td>Table1 RC:22</td>
      </tr></table>
    </div>
     <a href='#' onclick="Toggle('sub2')">Table2</a><br>
     <div class='menuTable' id='sub2'>
      <table border="1" style="background-color:green;color:white"><tr>
       <td>Table2 RC:00</td>
       <td>Table2 RC:01</td>
       <td>Table2 RC:02</td>
      </tr><tr>
       <td>Table2 RC:10</td>
       <td>Table2 RC:11</td>
       <td>Table2 RC:12</td>
      </tr><tr>
       <td>Table2 RC:20</td>
       <td>Table2 RC:21</td>
       <td>Table2 RC:22</td>
      </tr></table>
    </div>
     <a href='#' onclick="Toggle('sub3')">Table3</a><br>
     <div class='menuTable' id='sub3'>
      <table border="1" style="background-color:blue;color:lightgray"><tr>
       <td>Table3 RC:00</td>
       <td>Table3 RC:01</td>
       <td>Table3 RC:02</td>
      </tr><tr>
       <td>Table3 RC:10</td>
       <td>Table3 RC:11</td>
       <td>Table3 RC:12</td>
      </tr><tr>
       <td>Table3 RC:20</td>
       <td>Table3 RC:21</td>
       <td>Table3 RC:22</td>
      </tr></table>
    </div>
    </body>
    </html> 
    You should be able to put links within the table cells
    Should be easy enough to make a horizontal menu as well.

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    jmrker, with what you have, makes it incapable for those with JS disabled to see the table.

    Anyway, could be of interest:
    Code:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    	{
    	var tables=['table1','table2','table3']; // Hide tables
    	for(var i=0;i<tables.length;i++)
    		$('#'+tables[i]).hide(); // Hide tables
    	});
    function showHide(el)
    {
    $('#'+el).toggle('slow');
    }
    </script>
    <style type="text/css">
    table{border:1px solid #222;width:200px;}
    </style>
     <a href='#table1' onclick="showHide('table1')">Table1</a><br>
      <table id="table1"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    <a href='#table2' onclick="showHide('table2')">Table2</a><br>
    <table id="table2"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    <a href='#table3' onclick="showHide('table3')">Table3</a><br>
     <table id="table3"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    jmrker, with what you have, makes it incapable for those with JS disabled to see the table.
    Easy enough to fix ... was not specified as a requirement in the original request.

    Here's a horizontal menu version of similar script:
    File: MenuTableHoriz.html
    PHP Code:
    <html>
    <
    head>
    <
    title>Menu with table</title>
    <
    style type="text/css">
     .
    menuTable display:blockwidth:200px; }
    </
    style>

    <
    script type="text/javascript">
    function 
    Toggle(Info) {
      var 
    IDS '';
      for (
    i=1i<=3i++) { IDS 'sub'+i;  document.getElementById(IDS).style.display 'none'; }
      var 
    CState document.getElementById(Info);
      if (
    CState.style.display == '') { CState.style.display 'none'; }
      if (
    CState.style.display == "none") { CState.style.display "block"; }
                                     else { 
    CState.style.display "none"; }
    }
    </script>

    </head>
    <body onload="Toggle('')">
    <h1>Menu with tables</h1>
    <div id="menu">
    <table border="0"><tr><td valign="top">
     <a href='#' onclick="Toggle('sub1')">Table1</a>
     <div class='menuTable' id='sub1'>
      <table border="1" style="background-color:red;color:black"><tr>
       <td>Table1 RC:00</td>   <td>Table1 RC:01</td>   <td>Table1 RC:02</td>
      </tr><tr>
       <td>Table1 RC:10</td>   <td>Table1 RC:11</td>   <td>Table1 RC:12</td>
      </tr><tr>
       <td>Table1 RC:20</td>   <td>Table1 RC:21</td>   <td>Table1 RC:22</td>
      </tr></table>
     </div>
    </td><td valign="top">
     <a href='#' onclick="Toggle('sub2')">Table2</a>
     <div class='menuTable' id='sub2'>
      <table border="0" style="background-color:green;color:white"><tr>
       <td>Table2 RC:00</td>   <td>Table2 RC:01</td>   <td>Table2 RC:02</td>
      </tr><tr>
       <td>Table2 RC:10</td>   <td>Table2 RC:11</td>   <td>Table2 RC:12</td>
      </tr><tr>
       <td>Table2 RC:20</td>   <td>Table2 RC:21</td>   <td>Table2 RC:22</td>
      </tr></table>
     </div>
    </td><td valign="top">
     <a href='#' onclick="Toggle('sub3')">Table3</a>
     <div class='menuTable' id='sub3'>
      <table border="1" style="background-color:blue;color:lightgray"><tr>
       <td>Table3 RC:00</td>   <td>Table3 RC:01</td>   <td>Table3 RC:02</td>
      </tr><tr>
       <td>Table3 RC:10</td>   <td>Table3 RC:11</td>   <td>Table3 RC:12</td>
      </tr><tr>
       <td>Table3 RC:20</td>   <td>Table3 RC:21</td>   <td>Table3 RC:22</td>
      </tr></table>
     </div>
    </td>
    </tr></table>
    </body>
    </html> 
    Also, does not require more time to call external script from different domain.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    playing

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    table{border:1px solid #222;width:200px;}
    </style>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (11-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Init(id){
     for (var zxc0=1;document.getElementById(id+zxc0);zxc0++){
      var table=document.getElementById(id+zxc0);
      if (!table) return;
      table.sz=[table.offsetWidth,table.offsetHeight];
      table.tp=zxcES('DIV',{overflow:'hidden'});
      table.parentNode.insertBefore(table.tp,table);
      zxcES(table,{},table.tp);
     zxcBAnimator('width#',table.tp,table.sz[0],0,10);
     zxcBAnimator('height#',table.tp,table.sz[1],0,10);
     }
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    var Speed=1000,Last;
    
    function showHide(id,spd){
     spd=spd||Speed;
     var table=document.getElementById(id);
     if (Last&&Last!=table){
      zxcBAnimator('width#',Last.tp,Last.sz[0],0,spd);
      zxcBAnimator('height#',Last.tp,Last.sz[1],0,spd);
     }
     zxcBAnimator('width#',table.tp,table.sz[0],0,spd);
     zxcBAnimator('height#',table.tp,table.sz[1],0,spd);
     Last=table;
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body onload="Init('table')">
     <a href='#' onclick="showHide('table1'); return false;">Table1</a><br>
      <table id="table1"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    <a href='#' onclick="showHide('table2'); return false;">Table2</a><br>
    <table id="table2"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    <a href='#table3' onclick="showHide('table3'); return false;">Table3</a><br>
     <table id="table3"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    </body>
    
    </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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    table{border:1px solid #222;width:200px;}
    </style>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (11-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Init(id){
     for (var zxc0=1;document.getElementById(id+zxc0);zxc0++){
      var table=document.getElementById(id+zxc0);
      if (!table) return;
      table.sz=[table.offsetWidth,table.offsetHeight];
      table.tp=zxcES('DIV',{overflow:'hidden'});
      table.parentNode.insertBefore(table.tp,table);
      zxcES(table,{},table.tp);
      showHide(id+zxc0,10);
     }
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    var Speed=1000;
    
    function showHide(id,spd){
     spd=spd||Speed;
     var table=document.getElementById(id);
     zxcBAnimator('width#',table.tp,table.sz[0],0,spd);
     zxcBAnimator('height#',table.tp,table.sz[1],0,spd);
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body onload="Init('table')">
     <a href='#' onclick="showHide('table1'); return false;">Table1</a><br>
      <table id="table1"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    <a href='#' onclick="showHide('table2'); return false;">Table2</a><br>
    <table id="table2"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    <a href='#table3' onclick="showHide('table3'); return false;">Table3</a><br>
     <table id="table3"><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr><tr>
       <td>Content</td>
       <td>Content</td>
       <td>Content</td>
      </tr></table>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •