JS/HTML - .SlideToggle two tables next to each other

Question

I have two tables with different heights next to each other. I would like the tables to slideToggle independently.

When selecting the table headers, currently nothing is happening...

The fiddle: http://jsfiddle.net/wod51fvL/

Any comments welcomed!

The HTML:

<h1>Test Heading 1</h1>
<table>
<tr>
    <td valign="top">
        <table class="tableSort">
            <thead>
                <tr>
                    <th id="clientClick" colspan="3" style="cursor:pointer;">Client</th>
                </tr>
            </thead>
            <div id="clientResult">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </div>
        </table>
    </td>
    <td valign="top">
        <table class="tableSort">
            <thead>
                <tr>
                    <th id="employeeClick" colspan="3" style="cursor:pointer;">Employee</th>
                </tr>
            </thead>
            <div id="employeeResult">
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </div>
        </table>
    </td>
</tr>
</table>

The JS:

var j$ = jQuery.noConflict();

j$(document).ready(function () {
j$("#clientClick").click(function () {
    j$("#clientResult").slideToggle(600);
});
});

j$(document).ready(function () {
j$("#employeeClick").click(function () {
    j$("#employeeResult").slideToggle(600);
});
});

Answer 1

A very bad html and js

1. You can't wrap tr tags into div.
2. You don't need to call document.ready function twice

Here is a quick jsfiddle to fit your example. It needs to be improved(no time sorry).

http://jsfiddle.net/wod51fvL/7/

$(document).ready(function () {
    $("#clientClick").click(function () {
        $("#clientResult").slideToggle(600);
    });
    $("#employeeClick").click(function () {
        $("#employeeResult").slideToggle(600);
    });
});