Имам въпрос относно функцията за свиване на Bootstrap. Почти съм сигурен, че пренебрегвам нещо доста очевидно или лесно за коригиране, но го търсих в Google много и си играх с кода, но без успех.
Имам страница с „настройки на акаунта“, където цялата информация за акаунта на даден потребител се показва във формат, подобен на таблица, като клетките на таблицата на последната колона на таблицата винаги съдържат бутон „редактиране“ за редактиране на тази информация. Когато хората кликнат върху „редактиране“, формуляр за редактиране ще се разшири точно под този ред на таблицата.
Следвах схемата на http://twitter.github.com/bootstrap/javascript.html#collapse , самата функция за свиване работи добре, но проблемът е, че всеки формуляр винаги се разширява над моята таблица, независимо върху кой бутон за редактиране щракна. Направих екранна снимка как изглежда. http://imageshack.us/photo/my-images/834/problemyn.png/ Вместо да е над цялата таблица, искам тя да се разширява точно под конкретния ред, като избутва долните редове надолу.
Ето моя код:
<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>