CODEWITHSUNDEEP
javascriptjqueryhtmlcssslidetoggle
user1080943
user1080943

Reputation: 85

jQuery slideToggle is adding white space

I have found several similar questions on StackOverflow, but I am unable to figure out the solution for myself.

When you expand and collapse the table repeatadly, it adds empty rows to the top of the table. How do I eliminate this behavior?

It's easiest seen on my fiddle: My Code

Here is my jQuery

$(function () {
    $('.header').click(function () {
        $(this).nextUntil('tr.header').slideToggle(0);
    });
});

Here is the CSS:

tr.header {
    cursor:pointer;
}

And here is the html (shortened for the sake of the question):

<table align="center">
<tr class="header">
    <td colspan="6" style="text-align:center;font-weight:bold">20 Accounts are Uninsured - Click to Expand</td>
</tr>
<tr style="display: none;">
    <td width="120">Account Number</td>
    <td width="200">Borrower</td>
    <td width="200">CoBorrower</td>
    <td width="220">Vehicle</td>
    <td width="110">VIN</td>
    <td width="120" align="center">View Policy Info</td>
</tr>
<tr style="display: none;">
    <td>
        <div align="center">46546</div>
    </td>
    <td>Jerry Junko</td>
    <td></td>
    <td>2004 Ford F-250 SD</td>
    <td>4SD65S46D4S6D</td>
    <td style="text-align:center"><a href="">View</a>

    </td>
</tr>
</table>

Upvotes: 2

Views: 327

Answers (1)

Rahul
Rahul

Reputation: 5774

Well, very tricky one but I found out that this issue belongs to the jQuery you are referring i.e. 1.6.4. Once you change it, you'll no longer see that glitch.

I recommend you to use the latest from 1.11.x or edge which is 2.x.x. These libraries have very good performance optimizations and new APIs and feature sets. jQuery 1.6.4 is fairly old.

Working fiddle : http://jsfiddle.net/6u0580jq/2/

Upvotes: 2

Related Questions