Bootstrap collapse within table/between table rows not working
expand, html-table, ruby-on-rails, twitter-bootstrap
Solution
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.
Problem
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: <%= @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> ```