Question

I have a problem with animations using jQuery on nested tables. I want to make a table that is a bit like a treeview, with a little + / – to expand and get more details about the clicked row.

How can I modify the following code for the animations to work both in Internet Explorer 6.0+ and in Firefox ?

I can change the markup or the javaScript, it doesn’t matter as long as it works.

If this is useful to know, this structure is generated using nested repeaters in asp.net. I have access to the Telerik’s radAjax control suite, but I haven’t been able to make their radGrid work with nested tables.

Document structure:

    <tr>         <th>&nbsp;</th>         <th>Code</th>         <th>Title</th>     </tr>       <tr>         <td><span class='TreeCollapseSign'>-</span></td>         <td>WAA-864R</td>         <td>Code 1 ... some details ... - MODULE 2</td>             </tr>      <tr>         <td colspan='6'>             <table>                      <tr>                     <th>Extra Info 1</th>                     <th>Extra Info 2</th>                     <th>Extra Info 3</th>                 </tr>                  <tr>                     <td>Some info...</td>                     <td>Some more info...</td>                     <td>Yet more Info</td>                 </tr>                                             </table>         </td>     </tr> </table> 

Javascript:

<script type='text/javascript'>     (function($) {         $(document).ready(function(){              $('.TreeCollapseSign').data('visible', true);              $('.TreeCollapseSign').click(function(){                  if ($(this).data('visible')) {                     $(this).parent().parent().next().fadeOut().end().end().end().data('visible', false).text('+');                                 } else {                     $(this).parent().parent().next().fadeIn().end().end().end().data('visible', true).text('-');                 }              });         });     })($) </script> 

Answer 1

Are you able to change the output code, to use UL instead of a table?

If you can, then you might want to take a look at jQuery Treeview plugin. That’s what I use for all treeviews.

Actually, it’s semantically more appropriate to use an UL rather than a table for a treeview, but in your case would depend on having the chance of changing the code at all.

Anyway, in case you can’t, I think you can’t fade out TR’s… I had a similar problem in the past, so I’d suggest fading out the inner table instead, then hiding the TR.

Also, there’s no point in calling end() 3 times. It’s faster and more readable if you just do $(this) again after you show/hide the inner table:

var innerTable = $(this).parent().parent().next().find('table'); if ($(this).data('visible')) {   innerTable.fadeOut();   innerTable.parent().hide();   $(this)     .data('visible', false)     .text('+'); } else {   innerTable.parent().show();   innerTable.fadeIn();   $(this)     .data('visible', true)     .text('-'); }