Collapse Table

Demó

 

+ Gyümölcsök
Alma Banán Citrom
Körte Datolya Eper
Szilva Füge Málna
+ Állatok
Kutya Aligátor Medve
Ló Vakond Viziló
Tigris Hiúz Zebra
+ Színek
Matrózkék Olivazöld Coral
Karmazinvörös Nyeregbarna Gesztenyebarna
Tengerzöld Aquakék Ibolyakék

 

Kód

<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>

vissza