Question

I am trying to slide toggle the text box and label within a table. , The slide toggle is working fine but effect is not working smoothly when the check box is clicked the text box and label becomes visible in a weird way , it toggles from right and then leaves the gap between the fields , the gap increases each time the checkbox is clicked. Below is the code:

<script type="text/javascript">

$(document).ready(function () {
    var $startdates = $('#startDates');
    var $endDates = $('#endDates');
    $startdates.hide();
    $endDates.hide();

    $('#all').click(function () {
        $startdates.slideToggle('slow');
        $endDates.slideToggle('slow');
        return false;

    });
});
 </script>


<tr id="startDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.StartDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.StartDate) %>
            <%: Html.ValidationMessageFor(model => model.StartDate) %>
        </div>
        </td>
        </tr>

        <tr id="endDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.EndDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.EndDate) %>
            <%: Html.ValidationMessageFor(model => model.EndDate) %>
        </div>
        </td>
        </tr><tr></td>
        <td><input type="checkbox" name="All" id="all" /><label>All</label></td>
        </tr>

Answer 1

Toggle tr and td element isn’t recommended, expecially if you use effect (don’t use effect on tr !)

Try this to display your elements :

Replace .slideToggle() by .show(), or if it doesn’t work, by .css('display', 'table-row')