Jquery SlideToggle div in separate table row

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.

I have a JSfiddle example here: http://jsfiddle.net/yrM3H/811/

An example of my code is as follows:

html:

<table>
    <tr>
        <td>
            <div class="hidden">Expanded!</div>
        </td>
    </tr>
    <tr>
        <td><div class="toggle">Content</div></td>
    </tr>
    <tr>
        <td>
            <div class="hidden">Expanded!</div>
        </td>
    </tr>
</table>

js:

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

Solution

This should fix your issue: http://jsfiddle.net/yrM3H/813/

I changed it so it uses .find('hidden') on the second row to find the child element. Before hand, it wasn't finding the element at all.

On a side note - I don't understand why you don't just hide all .hidden elements with $('.hidden').hide(); ?