BootStrap 카드로 양식을 열고 닫습니다.

Bootstrap 카드를 사용하여 양식을 숨길 수 있습니다.
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
부트스트랩 4
Font Awesome 5