テックアカデミー第23回メンタリング:JSでtoggleを使って開閉ボタンを作成

今日はテックアカデミーの第23回目のメンタリングの日でした。実は今回含めてあと2回のメンタリングで契約終了となります。

作成中のWEBアプリはほぼほぼ完成したので追加機能の実装を行っています。それが開閉ボタンの作成です。今日はこの開閉ボタンの作り方を講師の方に支援してもらったので、それをメモしています。

これはどういった時に使うかと言うと「詳細検索画面」の表示に使っています。

より詳しい検索をしたい方はこちら、という形でクリックしたら詳細検索画面をそのページ内に展開するようなイメージです。

クリックされたら出現する開閉ボタンのイメージ

この実装の考え方は、クリックされるまではdisplay:noneで非表示にしておいて、クリックというイベントが発生したらJavaScriptで表示させる、という考え方です。

以下の画面があって、「こだわり検索を開く」をクリックすると

このように検索画面が出現するようなイメージです。ちょっと線ずれてるけど。

クリックしたら表示を切り替える、javascriptの実装部分

まずCSSは以下のようにしています。#syosaikensakuというIDをdisplay:noneで設定しています。他のborder-topとかはボタンの見た目を定義しているだけです。

#syosaikensaku {
  display:none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 2px #eee;
  margin-bottom: 15px;
  padding: 15px;
  margin-left: -2em;
  margin-right: -2em;
}

.btn-syosaikensaku {
  border:1px solid #ccc;
  border-radius:2px;
  padding:5px;
}

表示部分のHTMLは以下のようにしています。(Railsを使っているのでそれ用の記述になっていますけど)

<span id="jQueryPush" class="btn-syosaikensaku">こだわり検索を開く<img src="/images/icon/btn-kaihei.png"><img style="display:none;" src="/images/icon/btn-kaihei2.png"></span>
<div id="syosaikensaku" >
  <div class="search">
    <div class="row m5-r m5-l">
      <div class="text-center">
        <%= form_tag(shops_path, method: :get) do %>
          <div class="form-group form-inline">
            <%= text_field_tag :area, @area, class: 'form-control input-lg', placeholder: "地名", size: 5 %> × 
            <%= text_field_tag :shop, @shop, class: 'form-control input-lg', placeholder: "店名またはジャンル", size: 30 %>
            <%= submit_tag '検索', class: 'btn btn-kensaku m5-t' %>
          </div>
			<%= check_box_tag 'op1' %> 子連れしやすい
			<%= check_box_tag 'op2' %> 客層はファミリー向け
			etc...
        <% end %>
      </div>
    </div>
  </div>
</div>

javascriptはこのように記述しています。


<script type="text/javascript">
$(function(){
    $("#syosaikensaku").css("display", "none");
    $("#jQueryPush").click(function(){
        $("#syosaikensaku").toggle();
        $("[src='/images/icon/btn-kaihei.png']").toggle();
        $("[src='/images/icon/btn-kaihei2.png']").toggle();
    });
});
</script>

IDでjQueryPushと指定しているdivタグの部分がクリックされたら、3ヶ所を表示/非表示を切り替えるようにしています。3ヶ所というのはなにかというと#syosaikensakuのdivタグの部分と、btn-kaihei.pngと、btn-kaihei2.pngです。

それが以下の部分ですね。このこだわり検索を開くの部分がクリックされたらjavascriptが動くようになっています。

<span id="jQueryPush" class="btn-syosaikensaku">こだわり検索を開く<img src="/images/icon/btn-kaihei.png"><img style="display:none;" src="/images/icon/btn-kaihei2.png"></span>

また開閉を明示したいのとクリックするボタンだよ、と見せるためにアイコンを付けています。

HTML的には2つの画像(下向きと上向きの2つの画像)を並べておいて、片方は最初からdisplay noneにして、クリックで両方にトグルをかけて、表示を下向きの画像と、上向きの画像と変えています。

これで取り敢えず、ボタンによる開閉の実装が出来ました。

こういった処理はWEBの世界ではよくあると思うので、ここで学んでおけてよかったと思います。今回のは特にRails関係ない話ですので汎用的ですね。