BootStrapのcardでフォームを開閉させる

6857 ワード
Bootstrap FontAwesome Bootstrap テキストリンク

Bootstrapのcardを使って、フォームを隠せるようにします。
card-headerの部分をクリックするとcard-bodyが開閉するようにします。

card-bodyを直接開閉させるとアニメーションがおかしいので、親にsearch-divを作ってそれを動かすとスムーズになります。

<div id="searcher" class="card">
  <div class="card-header toggle-mark" id="search-header">
    <a data-toggle="collapse" href="#search-div" class="collapsed">"検索条件"</a>
  </div>
  <div class="collapse" id="search-div">
    <div class="card-body">
      <%= form_tag issues_path, method: :get do %>
        <div class="form-group row" %>
          <%= label :product, t_issue[:product], class: 'col-sm-2 col-form-label' %>
          <div class="col-sm-10">
            <%= collection_select :searcher, :product_id, Product.all, :id, :name, { selected: @filter[:product_id] }, class: 'form-control' %>
          </div>
        </div>
        <div class="form-group row">
          <%= label :findword, t_issue[:findword], class: 'col-sm-2 col-form-label' %>
          <div class="col-sm-10">
            <%= text_field :searcher, :findword, { value: @filter[:findword], class: 'form-control' } %>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-auto ml-auto">
            <%= submit_tag t("buttons.apply"), class: 'btn btn-outline-primary button__middle' %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>

toggle-markは右端の開閉アイコンになります。
font-weight: 900 を指定しないと表示されません。

<style>
.toggle-mark a::after {
  text-decoration: none;
  font-family: "Font Awesome 5 Free";
  content: "\f078";
  float: right;
  text-decoration: none;
  font-weight: 900;
}

.toggle-mark a.collapsed::after {
  content: "\f054";
}
</style>

ちょっと余白が多すぎてスペースが無駄ですが。

Rails 5
Bootstrap 4
Font Awesome 5