title: Using slideToggle with table rows (nesting a div) not working
body: <p>After reading around it seems that a good solution to using <code>slideToggle()</code> on table rows is to nest a div inside. I've tried the following, but it doesn't seem to work at all.</p>
  
  <p>jQuery</p>
  
  <pre><code>function toggle_dropdown(entry_id) {
  
      $(".library-dropdown-animation").slideUp("slow"); // Slide up any that are open
      $(".library-edit-dropdown").style.display = "none"; // Set their table row displays to none
      $("#library-dropdown-animation-" + entry_id ).slideDown("slow"); // slide the clicked one down 
      $("#library-edit-dropdown" + entry_id ).style.display = "block"; // set it's parent table row's display to block
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>                        &lt;tr class="library-item-header"&gt;
                              &lt;td class="library-item-title" onclick="toggle_dropdown(123);" style="cursor: pointer;"&gt;
                                  &lt;a href="&lt;?php echo get_permalink($anime_id); ?&gt;"&gt;&lt;?php echo $anime_name; ?&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr id="library-edit-dropdown-123" class="library-edit-dropdown" style="display: none;"&gt;
                              &lt;td colspan="4"&gt;
                                  &lt;div class="library-dropdown-animation" id="library-edit-animation-123"&gt;
  
                                  &lt;/div&gt;    
                              &lt;/td&gt;                                    
                          &lt;/tr&gt;
  
                          &lt;tr class="library-item-header"&gt;
                              &lt;td class="library-item-title" onclick="toggle_dropdown(124);" style="cursor: pointer;"&gt;
                                  &lt;a href="&lt;?php echo get_permalink($anime_id); ?&gt;"&gt;&lt;?php echo $anime_name; ?&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr id="library-edit-dropdown-124" class="library-edit-dropdown" style="display: none;"&gt;
                              &lt;td colspan="4"&gt;
                                  &lt;div class="library-dropdown-animation" id="library-edit-animation-124"&gt;
  
                                  &lt;/div&gt;    
                              &lt;/td&gt;                                    
                          &lt;/tr&gt;
  
                          &lt;tr class="library-item-header"&gt;
                              &lt;td class="library-item-title" onclick="toggle_dropdown(125);" style="cursor: pointer;"&gt;
                                  &lt;a href="&lt;?php echo get_permalink($anime_id); ?&gt;"&gt;&lt;?php echo $anime_name; ?&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr id="library-edit-dropdown-125" class="library-edit-dropdown" style="display: none;"&gt;
                              &lt;td colspan="4"&gt;
                                  &lt;div class="library-dropdown-animation" id="library-edit-animation-125"&gt;
  
                                  &lt;/div&gt;    
                              &lt;/td&gt;                                    
                          &lt;/tr&gt;
  </code></pre>
  
  <p>So essentially, I've got a <code>td</code> in another row that when it's clicked it slides it's content row (right beneath it) down while sliding any other row up. Since we can't use slide on table row (<code>hide()</code> and <code>show()</code> and <code>toggle()</code> works perfectly fine by the way) i've used a containing div that has content, in this example i've left the content out. In any case, clicking on the <code>td</code> does nothing using this jQuery.</p>
  
  <p>Here is a jsFiddle: <a href="http://jsfiddle.net/wxu3E/" rel="nofollow">http://jsfiddle.net/wxu3E/</a></p>