jQuery Animation problem using nested tables

Question

Hi, 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("-");
}