How to embed table rows in div or something else and do not broke jQuery fadeIn function?

Question

I have a very specific problem.

I would like to insert a specific code using fadeIn, fadeOut functions, but it is not working if I am using tr and td tags embeded in div tag.

I have this code for JS part:

var registrationPart = $('div.registration-part');
var loginPart = $('div.login-part');

$('span.logreg.log').click ( function () {

                registrationPart.fadeOut("fast");
                loginPart.fadeIn("slow");

}

And this in html:

<table class="table">
    <div class="registration-part">
        <tr>
                  <td>registration</td>
            </tr>
    </div>
    <div class="login-part">
        <tr>
                  <td>login</td>
            </tr>
    </div>
</table>

So the fadeIn, fadeOut is not working if there are tr,td tags inside of divs. If I replace them with divs or spans everything works fine.

Is there a way how to leave tr,td , so I don't need to make specific stylesheet for divs so it will look like tr,td.

Thanks in advance.

Answer 1

What you have is invalid HTML, so it's not rendering how you expect it to. You can't put a <div> inside a <table> and have it contain <tr> elements; you can include a <div> inside a <td> element but that doesn't really help you.

If you want to define separate sections of a table, use the <tbody> tag:

HTML

<table class="table">
    <tbody class="registration-part">
        <tr>
            <td>registration</td>
        </tr>
    </tbody>
    <tbody class="login-part">
        <tr>
            <td>login</td>
        </tr>
    </tbody>
</table>

JavaScript

var registrationPart = $('tbody.registration-part');
var loginPart = $('tbody.login-part');

$('span.logreg.log').click ( function () {
    registrationPart.fadeOut("fast");
    loginPart.fadeIn("slow");
}

If you take a look at this jsFiddle with your original HTML and inspect the table with Firebug, you'll notice that the <div> elements are before the table and empty, and don't include the rows that you wanted them to.