Koobi
02-15-2005, 08:29 PM
I need to be able to hide a portion of a table depending on which part is clicked and it should be unhidden when it's clicked again...toggled behaviour.
Here's a snippet of the HTML (NOTE: I can't change the HTML, it is generated by another persons code that I can't alter...but I can add attributes to the already exisiting tags):
<tr>
<td class="bodystyle">
<b>Akbar Red Garnet</b>
<br>
<table>
<tr>
<td class="bodystyle">100x100g Pkts</td>
<td><input type="checkbox" id="0" name="0" class="bodystyle" value="0"></td>
<td><input type="text" id="qty0" name="qty0" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">40x250g Pkts</td>
<td><input type="checkbox" id="1" name="1" class="bodystyle" value="1"></td>
<td><input type="text" id="qty1" name="qty1" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">200x50g Pkts</td>
<td><input type="checkbox" id="2" name="2" class="bodystyle" value="2"></td>
<td><input type="text" id="qty2" name="qty2" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x250g Bottles</td>
<td><input type="checkbox" id="3" name="3" class="bodystyle" value="3"></td>
<td><input type="text" id="qty3" name="qty3" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x125g Tins</td>
<td><input type="checkbox" id="4" name="4" class="bodystyle" value="4"></td>
<td><input type="text" id="qty4" name="qty4" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">10x450g Tins</td>
<td><input type="checkbox" id="5" name="5" class="bodystyle" value="5"></td>
<td><input type="text" id="qty5" name="qty5" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x225g Tins</td>
<td><input type="checkbox" id="6" name="6" class="bodystyle" value="6"></td>
<td><input type="text" id="qty6" name="qty6" class="bodystyle"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bodystyle">
<b>Akbar String & Tag</b>
<br>
<table>
<tr>
<td class="bodystyle">12x100x2g</td>
<td><input type="checkbox" id="47" name="47" class="bodystyle" value="47"></td>
<td><input type="text" id="qty47" name="qty47" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x50x2g</td>
<td><input type="checkbox" id="48" name="48" class="bodystyle" value="48"></td>
<td><input type="text" id="qty48" name="qty48" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x25x2g</td>
<td><input type="checkbox" id="49" name="49" class="bodystyle" value="49"></td>
<td><input type="text" id="qty49" name="qty49" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">60x10x2g</td>
<td><input type="checkbox" id="50" name="50" class="bodystyle" value="50"></td>
<td><input type="text" id="qty50" name="qty50" class="bodystyle"></td>
</tr>
</table>
</td>
</tr>
When a user clicks on either Akbar Red Garnet or Akbar String & Tag, I want that portion of the table below it (the input fields) to expand and when clicked on again, it should hide.
Thanks for your time :)
Here's a snippet of the HTML (NOTE: I can't change the HTML, it is generated by another persons code that I can't alter...but I can add attributes to the already exisiting tags):
<tr>
<td class="bodystyle">
<b>Akbar Red Garnet</b>
<br>
<table>
<tr>
<td class="bodystyle">100x100g Pkts</td>
<td><input type="checkbox" id="0" name="0" class="bodystyle" value="0"></td>
<td><input type="text" id="qty0" name="qty0" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">40x250g Pkts</td>
<td><input type="checkbox" id="1" name="1" class="bodystyle" value="1"></td>
<td><input type="text" id="qty1" name="qty1" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">200x50g Pkts</td>
<td><input type="checkbox" id="2" name="2" class="bodystyle" value="2"></td>
<td><input type="text" id="qty2" name="qty2" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x250g Bottles</td>
<td><input type="checkbox" id="3" name="3" class="bodystyle" value="3"></td>
<td><input type="text" id="qty3" name="qty3" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x125g Tins</td>
<td><input type="checkbox" id="4" name="4" class="bodystyle" value="4"></td>
<td><input type="text" id="qty4" name="qty4" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">10x450g Tins</td>
<td><input type="checkbox" id="5" name="5" class="bodystyle" value="5"></td>
<td><input type="text" id="qty5" name="qty5" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x225g Tins</td>
<td><input type="checkbox" id="6" name="6" class="bodystyle" value="6"></td>
<td><input type="text" id="qty6" name="qty6" class="bodystyle"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bodystyle">
<b>Akbar String & Tag</b>
<br>
<table>
<tr>
<td class="bodystyle">12x100x2g</td>
<td><input type="checkbox" id="47" name="47" class="bodystyle" value="47"></td>
<td><input type="text" id="qty47" name="qty47" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x50x2g</td>
<td><input type="checkbox" id="48" name="48" class="bodystyle" value="48"></td>
<td><input type="text" id="qty48" name="qty48" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">24x25x2g</td>
<td><input type="checkbox" id="49" name="49" class="bodystyle" value="49"></td>
<td><input type="text" id="qty49" name="qty49" class="bodystyle"></td>
</tr>
<tr>
<td class="bodystyle">60x10x2g</td>
<td><input type="checkbox" id="50" name="50" class="bodystyle" value="50"></td>
<td><input type="text" id="qty50" name="qty50" class="bodystyle"></td>
</tr>
</table>
</td>
</tr>
When a user clicks on either Akbar Red Garnet or Akbar String & Tag, I want that portion of the table below it (the input fields) to expand and when clicked on again, it should hide.
Thanks for your time :)