Bootstrap collapse within table/between table rows

Question

I have a question regarding the Bootstrap collapse feature. I'm pretty sure that I'm overlooking something quite obvious or easy to fix, but I googled it alot and played with the code, but without success.

I have a "account settings" page, where all account information of a user is shown in a table-like format, with the table cells of the last table column always containing an "edit"-button to edit that information. When people click "edit", an edit form shall expand just beneath that table row.

I followed the scheme at http://twitter.github.com/bootstrap/javascript.html#collapse , the collapse function itself works fine, but the problem is that each form always expands above my table, regardless of which edit button I click on. I made a screenshot of how it looks like. http://imageshack.us/photo/my-images/834/problemyn.png/ Instead of being above the whole table I want it to expand just beneath the specific row, pushing the lower rows down.

Here my code:

<table class="table">
<tbody>
    <tr>
        <td>Username</td>
        <td><%= @user.name %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#username">Edit</button></td>
    </tr>
    <div id="username" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
            <%= render 'shared/error_messages', object: form.object %>
                <%= form.label :name, "Change Username" %>
                <%= form.text_field :name %>
                <%= form.submit "Save changes", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
    <tr>
        <td>Email</td>
        <td><%= @user.email %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#email">Edit</button></td>
    </tr>
    <div id="email" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
                <%= render 'shared/error_messages', object: form.object %>
                <%= form.label :email, "Change Email" %>
                <%= form.text_field :email %>
                <%= form.submit "Save changes", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
    <tr>
        <td>Password</td>
        <td>Last time updated:&nbsp;<%= @user.updated_at %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#password">Edit</button></td>
    </tr>
    <div id="password" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
                <%= render 'shared/error_messages', object: form.object %>
                <%= form.label :password, "Change Password" %>
                <%= form.text_field :password %>
                <%= form.label :password_confirmation, "Confirm Password" %>
                <%= form.password_field :password_confirmation %>
                <%= form.submit "Save changes", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
    <tr>
        <td>Language</td>
        <td>English</td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#language">Edit</button></td>
    </tr>
    <div id="language" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <!-- code for language form -->
            </div>
        </div>
    </div>
    <tr>
        <td>Avatar</td>
        <td><%= avatar_status %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#demo">Edit</button></td>
    </tr>
    <div id="demo" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
            <%= form.label :avatar %>
            <%= form.file_field :avatar %>

            <%= form.submit "Add avatar", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
</tbody>
</table>

Answer 1

Hi I'm sorry I won't have a satisfying answer. It is not allowed to have anything other than <tr> elements as descendants of <tbody> so your HTML is not valid. This is what causes the glitchy behavior. Your best bet is to wrap every part of your form in a new table element.

Answer 2

To collapse a table row, you should write extra css for the collapsed row:

table .collapse.in {
    display: table-row !important;
}

It will fix the display issue after the row expanded.