Table and behaviors

[Brav]

Is it possible to use grow/shrink behavior on tabe elemets (I am using dreamweaver)? I want to create several rows to grow/shrink on click. One or more td elemets have picture in this (depends on the row).

[thescientist]

yes......Just like I said before, and it involves using Javascript. What code do you have so far? What are you trying to accomplish?

[Brav]

I have made complete table. There is alphabetic order and i want to make some kind of header were will be picture and when you click on picture it show all row of specific letter. Every row have 3 cells - first have picture, second and third have text.Her is the code for the table:

<table border="3" align="center" id="tabela">		  <tr class="row">			<th width="100" class="row" scope="col"></th>			<th width="381" class="row" id="Creature" scope="col">Creature Name</th>			<th width="180" class="row" scope="col">XP</th>		  </tr>		  			<tr>			<td width="100" class="row"><a class="thumbnail" href="Images/AluanBig.jpg" target="_blank"><img src="Images/Aluan.jpg" width="120" height="120" alt="Aluan" /><span><img src="Images/AluanBig.jpg" /></span></a></td>			<td class="row"><a href="Creature A.html#Aluan">Aluan</a></td>			<td class="row">480xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/AmarokBig.jpg" target="_blank"><img src="Images/Amarok.jpg" width="120" height="120" alt="Amarok" /><span><img src="Images/AmarokBig.jpg" /></span></a></td>			<td class="row"><a href="Creature A.html#Amarok">Amarok</a></td>			<td class="row">1100xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Baba RoggaBig.jpg" target="_blank"><img src="Images/Baba Rogga.jpg" width="120" height="120" alt="Baba Rogga" /><span><img src="Images/Baba RoggaBig.jpg" /></span></a></td>			<td class="row"><a href="Creature B.html#BabaRoga">Baba Rogga</a></td>			<td class="row">3300xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/BasiliskBig.jpg" target="_blank"><img src="Images/Basilisk.jpg" width="120" height="120" alt="Basilisk" /><span><img src="Images/BasiliskBig.jpg" /></span></a></td>			<td class="row"><a href="Creature B.html#Basilisk">Basilisk</a></td>			<td class="row">2480xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/BattlepedeBig.jpg" target="_blank"><img src="Images/Battlepede.jpg" width="120" height="120" alt="Battlepede" /><span><img src="Images/BattlepedeBig.jpg" /></span></a></td>			<td class="row"><a href="Creature B.html#Battlepede">Battlepede</a></td>			<td class="row">3120xp+Large</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Animal.jpg" width="120" height="120" alt="AnimaB" /></td>			<td class="row"><a href="Creature B.html#Bear">Bear</a></td>			<td class="row">Varius</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/BlakenedBig.jpg" target="_blank"><img src="Images/Blackened.jpg" width="120" height="120" alt="Blackened" /><span><img src="Images/BlakenedBig.jpg" /></span></a></td>			<td class="row"><a href="Creature B.html#Blackened">Blackened</a></td>			<td class="row">970xp</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Animal.jpg" width="120" height="120" alt="AnimalBoar" /></td>			<td class="row"><a href="Creature B.html#Boar">Boar</a></td>			<td class="row">-160xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Bronze WormBig.jpg" target="_blank"><img src="Images/Bronze Worm.jpg" width="120" height="120" alt="Bronze Worm" /><span><img src="Images/Bronze WormBig.jpg" /></span></a></td>			<td class="row"><a href="Creature B.html#BronzeWorm">Bronze Worm</a></td>			<td class="row">4400xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Aheroth - intermediate daemon of jeulosy and envyBig.jpg" target="_blank"><img src="Images/Daemon, Aheroth - intermediate daemon of jeulosy.jpg" width="120" height="120" alt="Daemon, Aheroth - intermediate daemon of jeulosy" /><span><img src="Images/Daemon, Aheroth - intermediate daemon of jeulosy and envyBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Acheroth">Daemon, Acheroth - intermediate daemon of jeulosy</a></td>			<td class="row">1585xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Bessascor - intermediate daemon of rage and wrathBig.jpg" target="_blank"><img src="Images/Daemon, Bessascor - intermediate daemon of rage.jpg" width="120" height="120" alt="Daemon, Bessascor - intermediate daemon of rage" /><span><img src="Images/Daemon, Bessascor - intermediate daemon of rage and wrathBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Bessascor">Daemon, Bessascor - intermediate daemon of rage</a></td>			<td class="row">2405xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Creeper - lesser daemon of fear and dreadBig.jpg" target="_blank"><img src="Images/Daemon, Creeper - lesser daemon of fear.jpg" width="120" height="120" alt="Daemon, Creeper - lesser daemon of fear" /><span><img src="Images/Daemon, Creeper - lesser daemon of fear and dreadBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Creeper">Daemon, Creeper - lesser daemon of fear</a></td>			<td class="row">870xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Hass, lesser daemon of hunger and gluttonyBig.jpg" target="_blank"><img src="Images/Daemon, Hass - lesser daemon of gluttony.jpg" width="120" height="120" alt="Daemon, Hass - lesser daemon of gluttony" /><span><img src="Images/Daemon, Hass, lesser daemon of hunger and gluttonyBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Hass">Daemon, Hass - lesser daemon of gluttony</a></td>			<td class="row">355xp+Small</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Sucubba and Incubus, intermediate daemon of desire and lustBig.jpg" target="_blank"><img src="Images/Daemon, Incubus - intermediate daemon of lust.jpg" width="120" height="120" alt="Daemon, Incubus - intermediate daemon of lust" /><span><img src="Images/Daemon, Sucubba and Incubus, intermediate daemon of desire and lustBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Sucubba">Daemon, Incubus - intermediate daemon of lust</a></td>			<td class="row">2425xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Morsus - intermediate daemon of hunger and gluttonyBig.jpg" target="_blank"><img src="Images/Daemon, Morsus - intermediate daemon of hunger.jpg" width="120" height="120" alt="Daemon, Morsus - intermediate daemon of hunger" /><span><img src="Images/Daemon, Morsus - intermediate daemon of hunger and gluttonyBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Morsus">Daemon, Morsus - intermediate daemon of hunger</a></td>			<td class="row">855xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Nayed - intermediate daemon of hunger and gluttonyBig.jpg" target="_blank"><img src="Images/Daemon, Nayed - intermediate daemon of gluttony.jpg" width="120" height="120" alt="Daemon, Nayed - intermediate daemon of gluttony" /><span><img src="Images/Daemon, Nayed - intermediate daemon of hunger and gluttonyBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Nayed">Daemon, Nayed - intermediate daemon of gluttony</a></td>			<td class="row">1805xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Omrzus - intermediate daemon of hate and dispiseBig.jpg" target="_blank"><img src="Images/Daemon, Omrzus - intermediate daemon of hate.jpg" width="120" height="120" alt="Daemon, Omrzus - intermediate daemon of hate" /><span><img src="Images/Daemon, Omrzus - intermediate daemon of hate and dispiseBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Omrzus">Daemon, Omrzus - intermediate daemon of hate</a></td>			<td class="row">2115xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Sucubba and Incubus, intermediate daemon of desire and lustBig.jpg" target="_blank"><img src="Images/Daemon, Sucubba intermediate daemon of desire.jpg" width="120" height="120" alt="Daemon, Sucubba intermediate daemon of desire" /><span><img src="Images/Daemon, Sucubba and Incubus, intermediate daemon of desire and lustBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Sucubba">Daemon, Sucubba intermediate daemon of desire</a></td>			<td class="row">2425xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Daemon, Zavidius - greater daemon of jeulosy and envyBig.jpg" target="_blank"><img src="Images/Daemon, Zavidius - greater daemon of envy.jpg" width="120" height="120" alt="Daemon, Zavidius - greater daemon of envy" /><span><img src="Images/Daemon, Zavidius - greater daemon of jeulosy and envyBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Zavidius">Daemon, Zavidius - greater daemon of envy</a></td>			<td class="row">4310xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/DerzekBig.jpg" target="_blank"><img src="Images/Derzek.jpg" width="120" height="120" alt="Derzek" /><span><img src="Images/DerzekBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Derzek">Derzek</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/DirkarBig.jpg" target="_blank"><img src="Images/Dirkar.jpg" width="120" height="120" alt="Dirkar" /><span><img src="Images/DirkarBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Dirkar">Dirkar</a></td>			<td class="row">74xp</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Animal.jpg" width="120" height="120" alt="AnimalDog" /></td>			<td class="row"><a href="Creature D.html#Dog">Dog</a></td>			<td class="row">Varius</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/DwarfBig.jpg" target="_blank"><img src="Images/Dwarf.jpg" width="120" height="120" alt="Dwarf" /><span><img src="Images/DwarfBig.jpg" /></span></a></td>			<td class="row"><a href="Creature D.html#Dwarf">Dwarf</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/FanalirBig.jpg" target="_blank"><img src="Images/Fanalir.jpg" width="120" height="120" alt="Fanalir" /><span><img src="Images/FanalirBig.jpg" /></span></a></td>			<td class="row"><a href="Creature F.html#Fanalir">Fanalir</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Gas Walker.jpg" width="120" height="120" alt="Gas Walker" /></td>			<td class="row"><a href="Creature G.html#GasWalker">Gas Walker</a></td>			<td class="row">260xp</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Ghoul, Human.jpg" width="120" height="120" alt="Ghoul, Human" /></td>			<td class="row"><a href="Creature G.html#HumanGhoul">Ghoul, Human</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Giant, Gmarug.jpg" width="120" height="120" alt="Giant, Gmarug" /></td>			<td class="row"><a href="Creature G.html#Gmarug">Giant, Gmarug</a></td>			<td class="row">690xp</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Giant, Savage (female).jpg" width="120" height="120" alt="Giant, Savage (female)" /></td>			<td class="row"><a href="Creature G.html#Giant">Giant, Savage (female)</a></td>			<td class="row">665xp</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Giant, Savage (male).jpg" width="120" height="120" alt="Giant, Savage (male)" /></td>			<td class="row"><a href="Creature G.html#SavageG">Giant, Savage (male)</a></td>			<td class="row">665xp</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Giant, Ulruk.jpg" width="120" height="120" alt="Giant, Ulruk" /></td>			<td class="row"><a href="Creature G.html#Ulruk">Giant, Ulruk</a></td>			<td class="row">865xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Gnaug (Blade Fiend).jpg" width="120" height="120" alt="Gnaug (Blade Fiend)" /></td>			<td class="row"><a href="Creature G.html#GnaugBF">Gnaug (Blade Fiend)</a></td>			<td class="row">435xp+Small</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Gnaug (Blade Lord).jpg" width="120" height="120" alt="Gnaug (Blade Lord)" /></td>			<td class="row"><a href="Creature G.html#GnaugBL">Gnaug (Blade Lord)</a></td>			<td class="row">1215xp</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Goblin.jpg" width="120" height="120" alt="Goblin" /></td>			<td class="row"><a href="Creature G.html#Goblin">Goblin</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Grat.jpg" width="120" height="120" alt="Grat" /></td>			<td class="row"><a href="Creature G.html#Grat">Grat</a></td>			<td class="row">634xp</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Grunaper.jpg" width="120" height="120" alt="Grunaper" /></td>			<td class="row"><a href="Creature G.html#Grunaper">Grunaper</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Gruntaur.jpg" width="120" height="120" alt="Gruntaur" /></td>			<td class="row"><a href="Creature G.html#Gruntaur">Gruntaur</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Harpy.jpg" width="120" height="120" alt="Harpy" /></td>			<td class="row"><a href="Creature H.html#Harpy">Harpy</a></td>			<td class="row">655xp</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Vampire, Heartless.jpg" width="120" height="120" alt="Heartless" /></td>			<td class="row"><a href="Creature H.html#Heartless">Heartless</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Hiver Vassal, Fanalir.jpg" width="120" height="120" alt="Hiver Vassal, Fanalir" /></td>			<td class="row"><a href="Creature H.html#Hiver">Hiver Vassal</a>, <a href="Creature H.html#HiverF">Fanalir</a></td>			<td class="row">175xp+Small</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Hiver Vassal, Human, Gaeb.jpg" width="120" height="120" alt="Hiver Vassal, Human, Gaeb" /></td>			<td class="row"><a href="Creature H.html#Hiver">Hiver Vassal</a>, <a href="Creature H.html#HiverAH">Atrum Human</a></td>			<td class="row">15xp</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Animal.jpg" width="120" height="120" alt="AnimaHorse" /></td>			<td class="row"><a href="Creature H.html">Horse</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Human, Gaeb.jpg" width="120" height="120" alt="Human, Gaeb" /></td>			<td class="row"><a href="Creature H.html#HumanG">Human, Gaeb</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Human, Glacius.jpg" width="120" height="120" alt="Human, Glacius" /></td>			<td class="row"><a href="Creature H.html#HumanGL">Human, Glacius</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Human, Ignus.jpg" width="120" height="120" alt="Human, Ignus" /></td>			<td class="row"><a href="Creature H.html#HumanI">Human, Ignus</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Human, Nephilim.jpg" width="120" height="120" alt="Human, Nephilim" /></td>			<td class="row"><a href="Creature H.html#HumanN">Human, Nephilim</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><img src="Images/Kaat.jpg" width="120" height="120" alt="Kaat" /></td>			<td class="row"><a href="Creature K.html">Kaat</a></td>			<td class="row">-170xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/KaburasBig.jpg"><img src="Images/Kaburas.jpg" width="120" height="120" alt="Kaburas" /><span><img src="Images/KaburasBig.jpg" /></span></a></td>			<td class="row"><a href="Creature K.html#Kaburas">Kaburas</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Kala-Bal'k (Thunder Moth)Big.jpg" target="_blank"><img src="Images/Kala-Bal'k (thunder moth).jpg" width="120" height="120" alt="Kala-Bal'k (thunder moth)" /><span><img src="Images/Kala-Bal'k (Thunder Moth)Big.jpg" /></span></a></td>			<td class="row"><a href="Creature K.html#KalabalakTM">Kala-Bal'k (thunder moth)</a></td>			<td class="row">-475xp+Small</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Kala-Bal'k (Thunder Worm)Big.jpg" target="_blank"><img src="Images/Kala-Bal'k (thunder worm).jpg" width="120" height="120" alt="Kala-Bal'k (thunder worm)" /><span><img src="Images/Kala-Bal'k (Thunder Worm)Big.jpg" /></span></a></td>			<td class="row"><a href="Creature K.html#Kalabalk">Kala-Bal'k (thunder worm)</a></td>			<td class="row">935xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Maize DwellerBig.jpg" target="_blank"><img src="Images/Maize Dweller.jpg" width="120" height="120" alt="Maize Dweller" /><span><img src="Images/Maize DwellerBig.jpg" /></span></a></td>			<td class="row"><a href="Creature M.html#MaizeD">Maize Dweller</a></td>			<td class="row">240xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/ManticoreBig.jpg" target="_blank"><img src="Images/Manticore.jpg" width="120" height="120" alt="Manticore" /><span><img src="Images/ManticoreBig.jpg" /></span></a></td>			<td class="row"><a href="Creature M.html#Manticore">Manticore</a></td>			<td class="row">2084xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/MurkalBig.jpg" target="_blank"><img src="Images/Muarkal.jpg" width="120" height="120" alt="Muarkal" /><span><img src="Images/MurkalBig.jpg" /></span></a></td>			<td class="row"><a href="Creature M.html#Murkal">Murkal</a></td>			<td class="row">329xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/OctanoirBig.jpg" target="_blank"><img src="Images/Octanoir.jpg" width="120" height="120" alt="Octanoir" /><span><img src="Images/OctanoirBig.jpg" /></span></a></td>			<td class="row"><a href="Creature O.html#Octarion">Octanoir</a></td>			<td class="row">2175xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/OggrokBig.jpg" target="_blank"><img src="Images/Oggrok.jpg" width="120" height="120" alt="Oggrok" /><span><img src="Images/OggrokBig.jpg" /></span></a></td>			<td class="row"><a href="Creature O.html#Oggrok">Oggrok</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Quaya Anur (Cave Dweller)Big.jpg" target="_blank"><img src="Images/Quaya Anur (cave dweller).jpg" width="120" height="120" alt="Quaya Anur (cave dweller)" /><span><img src="Images/Quaya Anur (Cave Dweller)Big.jpg" /></span></a></td>			<td class="row"><a href="Creature Q.html#QuayaA">Quaya Anur (cave dweller)</a></td>			<td class="row">2145xp+Large</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Animal.jpg" width="120" height="120" alt="AnimalRat" /></td>			<td class="row"><a href="Creature R.html#Rat">Rat</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/RatriussBig.jpg" target="_blank"><img src="Images/Ratriuss.jpg" width="120" height="120" alt="Ratriuss" /><span><img src="Images/RatriussBig.jpg" /></span></a></td>			<td class="row"><a href="Creature R.html#Ratriuss">Ratriuss</a></td>			<td class="row">1483xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Ring GuardianBig.jpg" target="_blank"><img src="Images/Ring Guardian.jpg" width="120" height="120" alt="Ring Guardian" /><span><img src="Images/Ring GuardianBig.jpg" /></span></a></td>			<td class="row"><a href="Creature R.html#RingG">Ring Guardian</a></td>			<td class="row">1795xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/RisslicaBig.jpg" target="_blank"><img src="Images/Risslica.jpg" width="120" height="120" alt="Risslica" /><span><img src="Images/RisslicaBig.jpg" /></span></a></td>			<td class="row"><a href="Creature R.html#Risslica">Risslica</a></td>			<td class="row">-130xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/SalamanderBig.jpg" target="_blank"><img src="Images/Salamander.jpg" width="120" height="120" alt="Salamander" /><span><img src="Images/SalamanderBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#Salamander">Salamander</a></td>			<td class="row">3350xp+MM Taurian</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/SandagornBig.jpg" target="_blank"><img src="Images/Sandagorn.jpg" width="120" height="120" alt="Sandagorn" /><span><img src="Images/SandagornBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html">Sandagorn</a></td>			<td class="row">1160xp+Large</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/SaurianBig.jpg" target="_blank"><img src="Images/Saurian.jpg" width="120" height="120" alt="Saurian" /><span><img src="Images/SaurianBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#Saurian">Saurian</a></td>			<td class="row">265xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/SentinelBig.jpg" target="_blank"><img src="Images/Sentinel.jpg" width="120" height="120" alt="Sentinel" /><span><img src="Images/SentinelBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#Sentinel">Sentinel</a></td>			<td class="row">555xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/ShibBig.jpg" target="_blank"><img src="Images/Shib.jpg" width="120" height="120" alt="Shib" /><span><img src="Images/ShibBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#Shib">Shib</a></td>			<td class="row">387xp+Small</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Skack, JuggernautBig.jpg" target="_blank"><img src="Images/Skack, Juggernaut.jpg" width="120" height="120" alt="Skack, Juggernaut" /><span><img src="Images/Skack, JuggernautBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#SkackJ">Skack, Juggernaut</a></td>			<td class="row">4560xp+Huge</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Skack, Half-Skack RunnerBig.jpg" target="_blank"><img src="Images/Skack, Runner.jpg" width="120" height="120" alt="Skack, Runner" /><span><img src="Images/Skack, Half-Skack RunnerBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#HalfSkackR">Skack,Half-Skack Runner</a></td>			<td class="row">1540xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/SkackBig.jpg" target="_blank"><img src="Images/Skack.jpg" width="120" height="120" alt="Skack" /><span><img src="Images/SkackBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#Skack">Skack</a></td>			<td class="row">2355xp+Large Taurian</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Skeleton, HumanBig.jpg" target="_blank"><img src="Images/Skeleton, Human.jpg" width="120" height="120" alt="Skeleton, Human" /><span><img src="Images/Skeleton, HumanBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#Skeleton">Skeleton</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Animal.jpg" width="120" height="120" alt="AnimalSnakeC" /></td>			<td class="row"><a href="Creature S.html#SnakeC">Snake, Constrictor</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/Snow SnakeBig.jpg" target="_blank"><img src="Images/Snow Snake.jpg" width="120" height="120" alt="Snow Snake" /><span><img src="Images/Snow SnakeBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#SnakeS">Snake, Snow</a></td>			<td class="row">495xp+Large</td>		  </tr>		  <tr>			<td class="row"><img src="Images/Animal.jpg" width="120" height="120" alt="AnimalSnakeV" /></td>			<td class="row"><a href="Creature S.html#SnakeV">Snake, Viper</a></td>			<td class="row">Varies</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/SpinecrawlerBig.jpg" target="_blank"><img src="Images/Spinecrawler.jpg" width="120" height="120" alt="Spinecrawler" /><span><img src="Images/SpinecrawlerBig.jpg" /></span></a></td>			<td class="row"><a href="Creature S.html#Spinecrawler">Spinecrawler</a></td>			<td class="row">355xp</td>

[ShadowMage]

You'd have to create an onclick handler on your images. Then with JavaScript modify the height/width of the image. Modifying the image dimensions should (I think) make the row/cell expand to fit it.

[Brav]

I am not quite familiar with js (just started to learn) and web site that i made will be on line in couple of days, and I want to make it more user friendly, if it is possible in such short time. I know that I am asking a lot, but can you make some example how should i do that (looked all over the net for solution but non that i tried didn't work for me).

[ShadowMage]

I have made complete table. There is alphabetic order and i want to make some kind of header were will be picture and when you click on picture it show all row of specific letter. Every row have 3 cells - first have picture, second and third have text.

Sorry, I didn't read your post good enough. :)You would probably be better off to do this with <div>'s instead of a table. It can be done with a table but it's a lot more work. How much recoding do you want to do? It's going to be less work right now to do it with tables, but in the long run it'd be easier to do it with <div>'s. Either way you'll need to do a little restructuring.If you stick with tables, you need to add <tbody> elements around your alphabet groups and give them id's. Here's what I mean:

<tbody id='row_a'>   <tr>	  <td>'A' image</td>   </tr></tbody>...<tbody id='row_z'>   <tr>	  <td>'Z' image</td>   </tr></tbody>

[Brav]

Ok, i understood that. What is next thing to do?I found this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Untitled</title>  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  <style type="text/css">  td{border:3px solid red;}  </style>  <script type="text/javascript">  function hideShow(el_id){	var el=document.getElementById(el_id);	if(el_id.style.display!="none"){	  el_id.style.display="none";	}else{	  el_id.style.display="";	}  }  </script>  </head>  <body>  <table>  <tbody id="rowA">  <tr>  <td> </td>  </tr>  <tr>  <td> </td>  </tr>  <tr>  <td> </td>  </tr></tbody>  </table>  <a href="#" onclick="hideShow(row1);">Hide/Show Row A</a><br />	</body>  </html>

It works the way i want, but when i tried to apply to the table, nothing happens. How i need to modify this to work on my table?

[ShadowMage]

Yep! That's exactly the script I was going to show you. As for why it doesn't work, the id you pass to the function needs to match the id of the row you want to hide.The row you want to hide:<tbody id="rowA">The call to the function:<a href="#" onclick="hideShow(row1);">The two bolded terms need to match. Also, when you pass the id to the function it needs to be surrounded by quotes:<a href="#" onclick="hideShow('rowA');">Edit: One other thing. Your function is a little off too. You have:

function hideShow(el_id){  var el=document.getElementById(el_id);  if(el_id.style.display!="none"){	el_id.style.display="none";  }else{	el_id.style.display="";  }}

el is the reference to the element, el_id is the id used to get the reference. You should be access the properties of the element like this:el.style.display

[Brav]

I change that, but it still does not work. I am bit confused. When i make new table (in new file) this way it works, but when i apply that in my table nothing happens. Her is the code to the end of A letter:

 <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ripped World</title><link href="RippedWorld.css" rel="stylesheet" type="text/css" /><script src="SpryAssets/SpryMenuBar.js" type="text/javascript">function hideShow(el_id){	var el=document.getElementById(el_id);	if(el_id.style.display!="none"){	  el_id.style.display="none";	}else{	  el_id.style.display="";	}  }</script><link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /></head><body>  <div id="container">	<div id="logo"><img src="images/POZADINA_01.jpg" width="194" height="148" alt="Logo" /></div>	<div id="header"><img src="images/POZADINA_02.jpg" width="671" height="148" alt="Header" /></div>	<div id="desniStub"></div>	<div id="leviStub">	  <div id="main-nav">		<ul id="Meni" class="MenuBarVertical">		  <li><a class="MenuBarItemSubmenu" href="#">Player</a>			<ul>			  <li><a href="Chapter I.html#Basic" class="MenuBarItemSubmenu">Basic</a>				<ul>				  <li><a href="Chapter I.html#Abilities">Abilities</a></li>				  <li><a href="Chapter I.html#Stats">Stats</a></li>				  <li><a href="Chapter I.html#Skills">Skills</a></li>				  <li><a href="Chapter I.html#CharacterCreation">Character Creation</a></li>				  <li><a href="Chapter I.html#CharacterAdvancement">Character Advancement</a></li>				  <li><a href="Chapter I.html#Abbrevations">Abbrevations</a></li>				</ul>			  </li>			  <li><a href="Chapter II.html#Races" class="MenuBarItemSubmenu">Races</a>				<ul>				  <li><a href="Chapter II.html#IgnusHumas">Ignus Humans</a></li>				  <li><a href="Chapter II.html#GaebHumans">Gaeb Humans</a></li>				  <li><a href="Chapter II.html#GlaciusHumans">Glacius Humans</a></li>				  <li><a href="Chapter II.html#AtrumHumans">Atrum Humans</a></li>				  <li><a href="Chapter II.html#Aluans">Aluans</a></li>				  <li><a href="Chapter II.html#Sentinels">Sentinels</a></li>  <li><a href="Chapter II.html#Dwarves">Dwarves</a></li>  <li><a href="Chapter II.html#Nephilim">Nephilim</a></li>  <li><a href="Chapter II.html#Fanalirs">Fanalirs</a></li>  <li><a href="Chapter II.html#Goblins">Goblins</a></li>  <li><a href="Chapter II.html#Gruntaurs">Gruntaurs</a></li>  <li><a href="Chapter II.html#Saurians">Saurians</a></li>				</ul>			  </li>			  <li><a href="Chapter III.html#Specials" class="MenuBarItemSubmenu">Specials</a>				<ul>				  <li><a href="Chapter III.html">PC Specials</a></li>				</ul>			  </li>			  <li><a href="Chapter IV.html#Equipment" class="MenuBarItemSubmenu">Equipment</a>				<ul>				  <li><a href="Chapter IV.html#Weapons">Weapons</a></li>				  <li><a href="Chapter IV.html#Armors">Armor and Shields</a></li>				  <li><a href="#">Misclenious</a></li>				  <li><a href="#">Artifacts</a></li>				</ul>			  </li>			  <li><a href="Chapter V.html" class="MenuBarItemSubmenu">Combat</a>				<ul>				  <li><a href="#">Combat Basics</a></li>				  <li><a href="Chapter V.html#StatusEffects">Status Effects</a></li>				</ul>			  </li>			  <li><a href="#" class="MenuBarItemSubmenu">Spells</a>				<ul>				  <li><a href="#">Time</a></li>				  <li><a href="#">Space</a></li>				  <li><a href="#">Mind</a></li>				  <li><a href="#">Body</a></li>				  <li><a href="#">Light</a></li>				  <li><a href="#">Dark</a></li>				  <li><a href="#">Life</a></li>				  <li><a href="#">Death</a></li>				  <li><a href="#">Fire</a></li>				  <li><a href="#">Water</a></li>				  <li><a href="#">Air</a></li>				  <li><a href="#">Earth</a></li>				</ul>			  </li>  </ul>		  </li>		  <li><a href="#" class="MenuBarItemSubmenu">Skald</a>			<ul>			  <li><a href="#">History</a></li>			  <li><a href="#" class="MenuBarItemSubmenu">Geography</a>				<ul>				  <li><a href="#">Triune</a></li>				  <li><a href="#">Ignus</a></li>				  <li><a href="#">Gaeb</a></li>				  <li><a href="#">Glacius</a></li>				  <li><a href="#">Atrum</a></li>				</ul>			  </li>			  <li><a href="#">Pantheon</a></li>			  <li><a href="#">Characters</a></li>			  <li><a href="#">Organizations</a></li>			</ul>		  </li>		  <li><a class="MenuBarItemSubmenu" href="Main List.html#Creature">Creatures</a>			<ul>			  <li><a href="#">NPC Specials</a>			</li>			  <li><a href="Main List.html#Creature">Creatures</a></li>  </ul>		  </li>		  <li><a href="#">Sagas</a></li>		  <li><a href="#">Stories</a></li>		</ul>	  </div>	</div>	<div id="centar">	  <div class="Meni">Content for New Div Tag Goes Here</div>	  <div class="tabela">		<table border="3" align="center" id="tabela">		  <tr class="row">			<th width="100" class="row" scope="col"></th>			<th width="381" class="row" id="Creature" scope="col">Creature Name</th>			<th width="180" class="row" scope="col">XP</th>		  </tr>		  <tr>			  <td colspan="3" class="row"><a href="#" onclick="hideShow(rowA);">Hide/Show Row A</a><br /></td>			</tr>		  <tbody id="rowA">						<tr>			<td width="100" class="row"><a class="thumbnail" href="Images/AluanBig.jpg" target="_blank"><img src="Images/Aluan.jpg" width="120" height="120" alt="Aluan" /><span><img src="Images/AluanBig.jpg" /></span></a></td>			<td class="row"><a href="Creature A.html#Aluan">Aluan</a></td>			<td class="row">480xp</td>		  </tr>		  <tr>			<td width="100" class="row"><a class="thumbnail" href="Images/AmarokBig.jpg" target="_blank"><img src="Images/Amarok.jpg" width="120" height="120" alt="Amarok" /><span><img src="Images/AmarokBig.jpg" /></span></a></td>			<td class="row"><a href="Creature A.html#Amarok">Amarok</a></td>			<td class="row">1100xp+Large</td>		  </tr>		  </tbody>

What am i doing wrong?

[thescientist]

function hideShow(el_id){  var el=document.getElementById(el_id);  if(el_id.style.display!="none"){	el_id.style.display="none";  }else{	el_id.style.display="";  };};

line 1 of the function, you are setting the variable el to the passed in elements id (el_id). From there on you need to use el.style.display (in order to retain your reference to the element).

[Brav]

Changed it to look like this:

function hideShow(el_id){	var el=document.getElementById(el_id);	if(el.style.display!="none"){	  el.style.display="none";	}else{	  el.style.display="";	}  }

but still nothing

[thescientist]

oh yeah, noticed that you aren't passing your id's into function as strings either. You need to put single quotes around them. Or put double quotes on the outside, and single quotes on the inside, either way...when passing element ID's, you need quotes around the ID.

<td colspan="3" class="row"><a href="#" onclick="hideShow('rowA');">Hide/Show Row A</a><br /></td> or<td colspan="3" class="row"><a href="#" onclick='hideShow("rowA")';>Hide/Show Row A</a><br /></td>

[Brav]

Ok, and now i am lost What, where, how?Sorry did now see that. Changed, but i still does not work.

[ShadowMage]

Ok, and now i am lost What, where, how?Sorry did now see that. Changed, but i still does not work.

On the header rows where you have the onclick:<td colspan="3" class="row"><a href="#" onclick="hideShow(rowA);">Hide/Show Row A</a><br /></td>You need to pass the id (rowA) as a string. Right now you're passing it as a variable. To pass it as a string it needs to have quotes:<td colspan="3" class="row"><a href="#" onclick="hideShow('rowA');">Hide/Show Row A</a><br /></td>Edit:

Sorry did now see that. Changed, but i still does not work.

Didn't see that before. But I think I found the problem, see my post below.

[ShadowMage]

I suspect this might have something to do with it:<script src="SpryAssets/SpryMenuBar.js" type="text/javascript">I'm pretty sure you can't specify a source if you're using inline script. You should have two separate lines for that:

<script type="text/javascript" src='SpryAssets/SpryMenuBar.js'></script><script type='text/javascript'>function showHide(el_id) {   //...Code}</script>

[thescientist]

no, you can include a script and still call it inline. The include makes it part of the page as if it were there, or else scoping would be a bigger issue, I think.edit: nevermind, I see what you meant.

[Brav]

Still nothing.

[thescientist]

ok, show us what the head section of your page looks like (what's between the <head> tags) and then give us the line of HTML that you are trying to make the call with.

[Brav]

jkloth advise works perfectly Change it, put another <script></script> and now it works like a charm :). Tnx a lot guys, you helped me quite a lot. just one more question: when the page is loaded i want everything to be hidden, and on click showed. Is it possible?

[thescientist]

you could just add to the class of all the relevant elements to have their display start out as none/hidden in the CSS.

[Brav]

Tnx for advice, will try that first thing in the morning, now i am of to bed. Once again tnx a lot guys.