title: Bootstrap collapse within table/between table rows not working
body: <p>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.  </p>
  
  <p>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.  </p>
  
  <p>I followed the scheme at <a href="http://twitter.github.com/bootstrap/javascript.html#collapse" rel="nofollow noreferrer">http://twitter.github.com/bootstrap/javascript.html#collapse</a> , 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. <a href="http://imageshack.us/photo/my-images/834/problemyn.png/" rel="nofollow noreferrer">http://imageshack.us/photo/my-images/834/problemyn.png/</a> Instead of being above the whole table I want it to expand just beneath the specific row, pushing the lower rows down. </p>
  
  <p>Here my code:</p>
  
  <pre><code>&lt;table class="table"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Username&lt;/td&gt;
          &lt;td&gt;&lt;%= @user.name %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#username"&gt;Edit&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;div id="username" class="collapse"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span6 offset3"&gt;
              &lt;%= form_for(@user) do |form| %&gt;
              &lt;%= render 'shared/error_messages', object: form.object %&gt;
                  &lt;%= form.label :name, "Change Username" %&gt;
                  &lt;%= form.text_field :name %&gt;
                  &lt;%= form.submit "Save changes", class: "btn btn-primary" %&gt;
              &lt;% end %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;tr&gt;
          &lt;td&gt;Email&lt;/td&gt;
          &lt;td&gt;&lt;%= @user.email %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#email"&gt;Edit&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;div id="email" class="collapse"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span6 offset3"&gt;
              &lt;%= form_for(@user) do |form| %&gt;
                  &lt;%= render 'shared/error_messages', object: form.object %&gt;
                  &lt;%= form.label :email, "Change Email" %&gt;
                  &lt;%= form.text_field :email %&gt;
                  &lt;%= form.submit "Save changes", class: "btn btn-primary" %&gt;
              &lt;% end %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;tr&gt;
          &lt;td&gt;Password&lt;/td&gt;
          &lt;td&gt;Last time updated:&amp;nbsp;&lt;%= @user.updated_at %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#password"&gt;Edit&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;div id="password" class="collapse"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span6 offset3"&gt;
              &lt;%= form_for(@user) do |form| %&gt;
                  &lt;%= render 'shared/error_messages', object: form.object %&gt;
                  &lt;%= form.label :password, "Change Password" %&gt;
                  &lt;%= form.text_field :password %&gt;
                  &lt;%= form.label :password_confirmation, "Confirm Password" %&gt;
                  &lt;%= form.password_field :password_confirmation %&gt;
                  &lt;%= form.submit "Save changes", class: "btn btn-primary" %&gt;
              &lt;% end %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;tr&gt;
          &lt;td&gt;Language&lt;/td&gt;
          &lt;td&gt;English&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#language"&gt;Edit&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;div id="language" class="collapse"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span6 offset3"&gt;
              &lt;!-- code for language form --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;tr&gt;
          &lt;td&gt;Avatar&lt;/td&gt;
          &lt;td&gt;&lt;%= avatar_status %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;Edit&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;div id="demo" class="collapse"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span6 offset3"&gt;
              &lt;%= form_for(@user) do |form| %&gt;
              &lt;%= form.label :avatar %&gt;
              &lt;%= form.file_field :avatar %&gt;
  
              &lt;%= form.submit "Add avatar", class: "btn btn-primary" %&gt;
              &lt;% end %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>