CODEWITHSUNDEEP
jqueryhtmlhtml-tablejquery-slider
Indigenuity
Indigenuity

Reputation: 9740

Table columns are changing during jQuery.slide()

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.

Upvotes: 0

Views: 1283

Answers (2)

CAbbott
CAbbott

Reputation: 8098

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/

Upvotes: 0

Sam
Sam

Reputation: 15771

It looks like you don't have any width set on the table or columns, so it will be fluid.

Try setting some width's.

Upvotes: 2

Related Questions