Question

I am using fadeIn to expand row in the table after user clicks. Everything works correct in Chrome and even IE, but it doesn’t work in Firefox 15.0.1. In FF after expanded row is faded in it’s background blinks one time.

Here is my code:

$('.patients-items-item').click(function() {
    var item = $(this).next('.toggle-item');

    if (item.is(":visible")) {
        item.hide();
    } else {
        item.fadeIn();
    }
});

Html:

<table class="patients-table">
    <tbody class="patients-items">
        <tr class="patients-items-item">
            <td>
                <span class="button collapsed"></span>
            </td>
            <td>
                Text
            </td>
            <td >
                Text2
            </td>
        </tr>
        <tr class="toggle-item">
            <td colspan="3" class="patients-studies-empty">
                Text3
            </td>
        </tr>
    </tbody>
</table>

Look at the Fiddle.

During investigation I have found that such behavior is present only in tables. If I do the same with divs code will work correct in all browsers.

Any suggestions will be helpful.

Answer 1

In jQuery you can use the toggle() function to get the behavior that you want.

See example here:

http://jsfiddle.net/83tNC/

$('.patients-items-item').on('click', function() {

    $(this).next('.toggle-item').toggle('fade');

});​