title: Jquery SlideToggle div in separate table row
body: <p>I am trying to get a slidetoggle working to display a hidden table row when a link is clicked in the previous row. I first had an issue where the sliding wasn't smooth and then found out that slidetoggle doesn't play nice with table rows. So I stuck the content in the hidden row in a div within the row and decided to hide that instead. My problem now is that I can't seem to figure out the correct code for jquery to find that div within the row.</p>
  
  <p>I have a JSfiddle example here: <a href="http://jsfiddle.net/yrM3H/811/" rel="nofollow noreferrer">http://jsfiddle.net/yrM3H/811/</a> </p>
  
  <p>An example of my code is as follows:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div class="hidden"&gt;Expanded!&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div class="toggle"&gt;Content&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div class="hidden"&gt;Expanded!&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>jQuery(document).ready(function () {
      jQuery(".toggle").parent().parent().next().children().next(".hidden").hide();
      jQuery(".toggle").click(function () {
          $('.active').not(this).toggleClass('active').parent().parent().next().children().next('.hidden').slideToggle(300);
          $(this).toggleClass('active').parent().parent().next().children().next('.hidden').slideToggle("fast");
      });
  });
  </code></pre>