DZone Snippets: javascrpt code http://snippets.dzone.com/posts Thu, 28 Aug 2008 21:11:01 GMT DZone Snippets: javascrpt code Expand and collapse effect for data grids http://snippets.dzone.com/posts/show/3667 This is a little use of dynamic CSS to create expandable, and collapsible sections in data grid presentations. <br />Cd& <br /><a href="http://www.expertsrt.com"> Experts Round Table</a> <br /> <br /> <br /><code> <br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <br /><html> <br /><head> <br /><style type="text/CSS"> <br /> table { <br /> width:100%; <br /> border-collapse:collapse; <br /> border:2px solid silver; <br /> } <br /> tbody { <br /> display:block <br /> } <br /> th { <br /> font-weight:normal; <br /> text-align:left; <br /> } <br /> td { <br /> text-align:center; <br /> padding:8px; <br /> border:1px solid silver; } <br /> .linkspan { <br /> color:gold; <br /> background-color:blue; <br /> font-weight:bold; <br /> text-decoration:none; <br /> padding:0 2px; <br /> font-size:1.2em; <br /> margin:right:3px; <br /> } <br /> .vis { <br /> display:block; <br /> } <br /></style> <br /> <br /><script type="text/javascript"> <br /> var ELpntr=false; <br /> function hideall() <br /> { <br /> locl = document.getElementsByTagName('tbody'); <br /> for (i=0;i<locl.length;i++) <br /> { <br /> locl[i].style.display='none'; <br /> } <br /> } <br /> <br /> function showHide(EL,PM) <br /> { <br /> ELpntr=document.getElementById(EL); <br /> if (ELpntr.style.display=='none') <br /> { <br /> document.getElementById(PM).innerHTML=' - '; <br /> ELpntr.style.display='block'; <br /> } <br /> else <br /> { <br /> document.getElementById(PM).innerHTML=' + '; <br /> ELpntr.style.display='none'; <br /> } <br /> } <br /> onload=hideall; <br /></script> <br /></head> <br /><body> <br /><table> <br /> <thead> <br /> <tr class="vis"> <th colspan="3"><a href="#" <br /> onclick="showHide('fruit','fruitspan')"> <br /> <span id="fruitspan" class="linkspan"> + </span> Fruit:</a></th></tr> <br /> </thead> <br /> <tbody id="fruit"> <br /> <tr> <td> Apple</td><td> Red</td><td> Shiny</td></tr> <br /> <tr> <td> Pear</td><td> Green</td><td> Firm</td></tr> <br /> <tr> <td> Banana</td><td> Red</td><td> Shiny</td></tr> <br /> </tbody> <br /></table> <br /><table> <br /> <thead> <br /> <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('vegtable','vegtablespan')"> <br /> <span id="vegtablespan" class="linkspan"> + </span> Vegtable:</a></th></tr> <br /> </thead> <br /> <tbody id="vegtable"> <br /> <tr> <td> Carrot</td><td> Orange</td><td> Crisp</td></tr> <br /> <tr> <td> Cucumber</td><td> Green</td><td> Delicious</td></tr> <br /> <tr> <td> Cauliflower</td><td> White</td><td> Firm</td></tr> <br /> </tbody> <br /></table> <br /><table> <br /> <thead> <br /> <tr class="vis"> <th colspan="3"><a href="#" onclick="showHide('animal','animalspan')"> <br /> <span id="animalspan" class="linkspan"> + </span> Animal:</a></th></tr> <br /> </thead> <br /> <tbody id="animal"> <br /> <tr> <td> Cat</td><td> Calico</td><td> Lazy</td></tr> <br /> <tr> <td> Dog</td><td> Retriever</td><td> Golden</td></tr> <br /> <tr> <td> Badger</td><td> Muddy</td><td> Mean</td></tr> <br /> </tbody> <br /></table> <br /></body> <br /></html> <br /></code> Wed, 14 Mar 2007 01:14:32 GMT http://snippets.dzone.com/posts/show/3667 COBOLdinosaur (Roy Marchand)