CODEWITHSUNDEEP
jquerycss
Robert
Robert

Reputation: 10400

jQuery slide down not sliding down

The slide down effect is not working. It shows the element but it does not, 'slide down'.

HTML:

        <div class='settings'>
            <h4>Account Settings</h4>
            <table class='options'>
                <tr>
                    <td class='name username'>Name</td>
                    <td class='value'>Robert Rocha</td>
                    <td class='edit editName'><a href='#'>Edit</a></td>
                </tr>
                <!-- edit name -->
                <tr class='hidden name-edit'>
                    <td colspan='3'>
                        <table class='edit-name'>
                            <tr>
                                <td class='first'><label for='fname'>First</label></td>
                                <td><input type='text' name='fname' class='fname' id='fname'></td>
                            </tr>
                            <tr>
                                <td class='last'><label for='lname'>Last</label></td>
                                <td><input type='text' name='lname' class='lname' id='lname'></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td colspan='2'class='commit'><a href='#' class='save'>Save</a><a href='#' class='cancel'>Cancel</a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class='name email'>Email</td>
                    <td class='value'>[email protected]</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <!-- edit email -->
                <tr  class='hidden'>
                    <td colspan='3' class='edit-email'><label for='email'>Email</label><input type='email' name='email' id='email'><a href='#' class='save'>Save</a><a href='#' class='cancel'>Cancel</a></td>          
                </tr>
                <tr>
                    <td class='name pword' colspan='2'>Password</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <!-- edit password -->
                <tr  class='hidden'>
                    <td colspan='3' class='edit-password'><label for='pword'>Password</label><input type='password' name='pword' id='pword'><a href='#' class='save'>Save</a><a href='#' class='cancel'>Cancel</a></td>
                </tr>
                <tr>
                    <td class='name remove-all' colspan='3'><a href='#'>Delete All Photos</a></td>
                </tr>
                <tr>
                    <td class='name remove-account' colspan='3'><a href='#'>Delete Account</a></td>
                </tr>
            </table>

        </div>
        <!-- end settings -->

CSS:

.hidden { display: none; }

/* Settings */

.settings {
    width: 650px;
    margin: 0 auto;
    padding: 1em;
}

.settings h4 {
    padding: 1em 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #cacece;
}

table {
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 200;
}

table.options { 
    width: 100%;
    table-layout: fixed;
}

.options tr { border-bottom: 1px solid #cacece; }
.options td { padding: 0.5em 0; }
.options .edit { text-align: right; }
.options .name { font-weight: bold; }
.options .remove-all, .options .remove-account { font-weight: 200; }

/* Edit Name Table */

table.edit-name {
    width: 300px;
    font-size: 0.9rem;
    margin: 0 auto;
}

.edit-name tr { border: none; }
.edit-name .save, .cancel { margin-left: 10px; }

/* Edit Table */

input[type='email'],
input[type='password'],
.edit-email .save,
.edit-email .cancel,
.edit-password .save,
.edit-password .cancel
{ margin-left: 15px; }

.edit-email, .edit-password { text-align: center; }

jQuery:

$('.options .editName a').on('click', function(e) {
    e.preventDefault();
    $('.name-edit').slideDown('slow');
});

Result: https://jsfiddle.net/ekL6450a/

Upvotes: 2

Views: 195

Answers (3)

Vitor Rigoni
Vitor Rigoni

Reputation: 573

You're working with tables... Switch to a tableless approach and it'll work. I've updated your fiddle with an example:

Html

<div class='settings'>
            <h4>Account Settings</h4>
      <div class="options">
        <span class="name username">Name</span>
        <span class="value">Robert Rocha</span>
        <span class="edit editName"><a href="#">Edit</a></span>
      </div>
      <div class="hidden name-edit">
        <div>
          <label for='fname'>First</label><br>
          <input type='text' name='fname' class='fname' id='fname'><br>

        </div>
      </div>
</div> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>

Javascript

$('.options .editName a').on('click', function(e) {
    e.preventDefault();
    $(this).parent().parent().next('.name-edit').slideToggle('slow');
});

Upvotes: 2

Ji_in_coding
Ji_in_coding

Reputation: 1701

the problem is with the nature of TR tag. slideDown works well with elements that is of display:block;

Just for fun, if you add 

tr{
    display: block;
}

before the css for your .hidden, you will realize that slideDown works.

see fiddleenter link description here

Upvotes: 2

Jasper
Jasper

Reputation: 833

Animations are not supported on table rows, you can consider to wrap your table in a div and apply the animation on that div.

From "Learning jQuery"

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

Upvotes: 3

Related Questions