javascrpt code

This is a little use of dynamic CSS to create expandable, and collapsible sections in data grid presentations.
Cd&
Experts Round Table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<style type="text/CSS">
   table {
          width:100%; 
          border-collapse:collapse;
          border:2px solid silver;
         }
   tbody {
          display:block
         }
   th {
       font-weight:normal;
       text-align:left;
      }
   td {
       text-align:center;
       padding:8px;
       border:1px solid silver; }
   .linkspan {
              color:gold;
              background-color:blue;
              font-weight:bold;
              text-decoration:none;
              padding:0 2px; 
              font-size:1.2em;
              margin:right:3px;
             }
   .vis {
         display:block;
        }
</style> 

<script type="text/javascript"> 
   var ELpntr=false;
   function hideall()
   {
      locl = document.getElementsByTagName('tbody');
      for (i=0;i<locl.length;i++)
      {
         locl[i].style.display='none';
      }
   }

   function showHide(EL,PM)
   {
      ELpntr=document.getElementById(EL);
      if (ELpntr.style.display=='none')
      {
         document.getElementById(PM).innerHTML=' - ';
         ELpntr.style.display='block';
      }
      else
      {
         document.getElementById(PM).innerHTML=' + ';
         ELpntr.style.display='none';
      }
   }
   onload=hideall;
</script>
</head> 
<body> 
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" 
      onclick="showHide('fruit','fruitspan')">
        <span id="fruitspan" class="linkspan"> + </span> Fruit:</a></th></tr>
   </thead> 
   <tbody id="fruit">
      <tr> <td> Apple</td><td> Red</td><td> Shiny</td></tr>
      <tr> <td> Pear</td><td> Green</td><td> Firm</td></tr>
      <tr> <td> Banana</td><td> Red</td><td> Shiny</td></tr>
   </tbody>
</table>
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('vegtable','vegtablespan')">
        <span id="vegtablespan" class="linkspan"> + </span> Vegtable:</a></th></tr> 
   </thead>
   <tbody id="vegtable">
      <tr> <td> Carrot</td><td> Orange</td><td> Crisp</td></tr>
      <tr> <td> Cucumber</td><td> Green</td><td> Delicious</td></tr>
      <tr> <td> Cauliflower</td><td> White</td><td> Firm</td></tr>
   </tbody>
</table>
<table>
   <thead>
   <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('animal','animalspan')">
        <span id="animalspan" class="linkspan"> + </span> Animal:</a></th></tr>
   </thead> 
   <tbody id="animal">
      <tr> <td> Cat</td><td> Calico</td><td> Lazy</td></tr>
      <tr> <td> Dog</td><td> Retriever</td><td> Golden</td></tr>
      <tr> <td> Badger</td><td> Muddy</td><td> Mean</td></tr>
   </tbody>
</table> 
</body> 
</html>
Popular @ dzone.com

Related Tags

Never been to DZone Snippets before?

Expand and collapse effect for data grids
