Question

I have a table where half the data is hidden, and can be expanded by pressing a button. I am following the pattern here. Here is my html:

<button class="toggleBtn">Hide/Show</button>
<table>
<tbody>
<tr>
    <td>Session Name : </td>
    <td>Generic name here</td>
</tr>
<tr>
    <td>Jump Date : </td>
    <td>12/25/2011</td>
</tr>
</tbody>
<tbody class="hiddenJumpSessionDetails" style="display:none;">
    
    <tr>
        <td>Created On : </td>
        <td>12/24/2011</td>
    </tr>
    <tr>
        <td>Inspector : </td>
        <td>Gadget</td>
    </tr>
    <tr>
        <td>Other Notes : </td>
        <td></td>
    </tr>
</tbody>

Here is my javascript:

<script>
$(document).ready(function()
{
    $(".toggleBtn").click(function()
    {
        $(".hiddenJumpSessionDetails").slideToggle();
    })
})

While the hidden part is scrolling up/down, the table acts as though there are 3 columns. The second column in the first moves to the right, the second column in the second moves slightly closer to the left. The entire second column moves back to the proper place once the slide is complete.

What is making the table behave this way?

Note: this effect doesn’t happen when there is no data in the second column in the hidden . If the ’12/24/2011′ and ‘Gadget’ were taken out, everything would seem fine.

Answer 1

I was able to get this to work correctly by setting display:block within your tbody elements and hiding the element within the script like so:

<tbody style="display:block;" >
.
.
.
<tbody class="hiddenJumpSessionDetails" style="display:block;">

$(document).ready(function()
{
    $(".hiddenJumpSessionDetails").hide();
    $(".toggleBtn").click(function () {
      $(".hiddenJumpSessionDetails").slideToggle("slow");
    });
});

Here’s an example: http://jsfiddle.net/aa7Kv/