Question

I would like to use this to hide/expand columns:
http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
but remove eveything having to do with the form. The java script function must be changed accordingly but I am not having any luck. Any suggestions?
Thanks.

Answer 1

Code test and works. Feel free to ask questions about it 🙂

<script language='javascript'>  // Set the default 'show' mode to that specified by W3C DOM // compliant browsers  var showMode = 'table-cell';  // However, IE5 at least does not render table cells correctly // using the style 'table-cell', but does when the style 'block' // is used, so handle this  if (document.all) showMode='block';  // This is the function that actually does the manipulation  var States = { };  function toggleVis(col){      if (!States[col] || States[col].IsOpen == null)     {         States[col] = {isOpen : true}; // This assumes the cell is already shown     }       mode =  States[col].IsOpen ? showMode : 'none';      cells = document.getElementsByName(col);     for(j = 0; j < cells.length; j++) cells[j].style.display = mode;      States[col].IsOpen = !States[col].IsOpen; }  </script>  <a href='#' onclick='toggleVis('tcol1'); return false;'>Toggle 1</a> <a href='#' onclick='toggleVis('tcol2'); return false;'>Toggle 2</a> <a href='#' onclick='toggleVis('tcol3'); return false;'>Toggle 3</a> <a href='#' onclick='toggleVis('tcol4'); return false;'>Toggle 3</a>  <table border=1> <tr> <td name='tcol1' class='bold'>column 1 text</td> <td name='tcol2' >column 2 text</td> <td name='tcol3' class='italic'>column 3 text</td> <td name='tcol4' >column 4 text</td> </tr> <tr> <td name='tcol1' class='bold'>column 1 text</td> <td name='tcol2' >column 2 text</td> <td name='tcol3' class='italic'>column 3 text</td> <td name='tcol4' >column 4 text</td> </tr> </table>