title: jQuery Animation problem using nested tables
body: <p>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 <strong>+ / -</strong> to expand and get more details about the clicked row.</p>
  
  <p>How can I modify the following code for the animations to work both in Internet Explorer 6.0+ and in Firefox ?</p>
  
  <p>I can change the markup or the javaScript, it doesn't matter as long as it works.</p>
  
  <p>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.</p>
  
  <p>Document structure:
      </p>
  
  <pre><code>    &lt;tr&gt;
          &lt;th&gt;&amp;nbsp;&lt;/th&gt;
          &lt;th&gt;Code&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
          &lt;td&gt;&lt;span class="TreeCollapseSign"&gt;-&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;WAA-864R&lt;/td&gt;
          &lt;td&gt;Code 1 ... some details ... - MODULE 2&lt;/td&gt;        
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td colspan="6"&gt;
              &lt;table&gt;     
                  &lt;tr&gt;
                      &lt;th&gt;Extra Info 1&lt;/th&gt;
                      &lt;th&gt;Extra Info 2&lt;/th&gt;
                      &lt;th&gt;Extra Info 3&lt;/th&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;Some info...&lt;/td&gt;
                      &lt;td&gt;Some more info...&lt;/td&gt;
                      &lt;td&gt;Yet more Info&lt;/td&gt;
                  &lt;/tr&gt;                                
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      (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("-");
                  }
  
              });
          });
      })($)
  &lt;/script&gt;
  </code></pre>