Bootstrapのアコーディオンメニュー（表示/ 非表示）

やりたい事

表が縦長になったので、いらない業を表示 / 非表示出来る様にしたかった。

気になっていた所

アコーディオンメニューと聞くとWEBページのメニュー一覧の表示 / 非表示のイメージだったので最初は気にもとめていなかったのですが、よくよく考えると「やりたい事はそう言う事だ！」と思ったので、それで実装してみました。

アコーディオンメニューの作成方法

調べるとCSSで実装したり、JSで実装したりと色んな方法が有ったのですが、今回はbootstrap4を使っていた事もあり、シンプルに作れるものを試してみました。

表の作成

まずは普通に表を作ります。
中身は家計簿にして、月/食費/水道代/電気代/電話代を表示します。
データベースはこんな感じ。

class CreateKakeibos < ActiveRecord::Migration[5.2]
  def change
    create_table :kakeibos do |t|
      t.integer :month
      t.integer :food
      t.integer :water
      t.integer :electric
      t.integer :telephone

      t.timestamps
    end
  end
end

データを入れて表示できるか確認！
controllers/table

class TablesController < ApplicationController
  def index
    @kakeibos = Kakeibo.all
  end
end

View/table/index.html.erb

<% @kakeibos.each do |kakeibo| %>
  <%= kakeibo.month %>月　電気代：<%= kakeibo.electric %><br> 
<% end %>

表示できたので表にしましょう。
View/table/index.html.erb

<table border="1" style="border-collapse: collapse">
  <tr>
    <th>月</th>
    <% @kakeibos.each do |kakeibo| %>
        <td><%= kakeibo.month %>月</td>
    <% end %>
    <td>
        合計
      </td>
  </tr>

  <tr>
    <th>食費</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.food %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:food) %></td>
  </tr>
  
  <tr>
    <th>水道代</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.water %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:water) %></td>
  </tr>
  
  <tr>
    <th>電気代</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.electric %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:electric) %></td>
  </tr>
  
  <tr>
    <th>携帯代</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.telephone %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:telephone) %></td>
  </tr>

</table>

表として1月から3月までの金額が表示されました。

各項目を消して月の合計金額だけを表示

やりたかった事はこれです。
項目を増やしていくと、合計を見たい時に下まで行かないと見れなかったり、食費の中でも細かく入力したい場合など「食費としては合計で〇〇円、細かく見ると、材料費〇〇円、飲料費〇〇円、外食〇〇円」みたいな書き方もすると思います。

なので、今回は項目の一番下に合計を作り、「合計」を押す事で食費～携帯代が表示/非表示するようにします。

まずは合計を作ります。
controllers/table

class TablesController < ApplicationController
  def index
    @kakeibos = Kakeibo.all
    # 各月の金額を合計しtotalsに入れていきます。
    @totals = [] 
    @kakeibos.each do |kakeibo|
      @totals.push kakeibo.food + kakeibo.water + kakeibo.electric + kakeibo.telephone
    end
  end
end

View/table/index.html.erb

<table border="1" style="border-collapse: collapse">
  <tr>
    <th>月</th>
    <% @kakeibos.each do |kakeibo| %>
        <td><%= kakeibo.month %>月</td>
    <% end %>
    <td>合計</td>
  </tr>

  <tr>
    <th>食費</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.food %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:food) %></td>
  </tr>
  
  <tr>
    <th>水道代</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.water %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:water) %></td>
  </tr>
  
  <tr>
    <th>電気代</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.electric %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:electric) %></td>
  </tr>
  
  <tr>
    <th>携帯代</th>
    <% @kakeibos.each do |kakeibo| %>
      <td><%= kakeibo.telephone %>円</td>
    <% end %>
    <td><%= @kakeibos.sum(:telephone) %></td>
  </tr>
  
  <tr>
    <th>合計</th>
    <% @totals.each do |totale| %>
      <td><%= totale %>円</td>
    <% end %>
    <td><%= @totals.sum %></td>
  </tr>

</table>

合計が出来たので、合計を押した際の表示/非表示（アコーディオンメニュー）を作ります
①合計の分を別tableで作ります。
②月の部分と、それ以下の項目の部分でtableを分けます。
③合計のtableの中にdata-toggle="collapse" data-target="#example-1" aria-expand="false" aria-controls="example-1"を付け加えます。
④項目のtableをdivで囲み、divにclass="collapse" id="example-1" を付け加えます。

View/table/index.html.erb

<table border="1" style="border-collapse: collapse">
  <tr>
    <th>月</th>
    <% @kakeibos.each do |kakeibo| %>
        <td><%= kakeibo.month %>月</td>
    <% end %>
    <td>合計</td>
  </tr>
</table>
<div class="collapse" id="example-1">
  <table border="1" style="border-collapse: collapse">
    <tr>
      <th>食費</th>
      <% @kakeibos.each do |kakeibo| %>
        <td><%= kakeibo.food %>円</td>
      <% end %>
      <td><%= @kakeibos.sum(:food) %></td>
    </tr>
    
    <tr>
      <th>水道代</th>
      <% @kakeibos.each do |kakeibo| %>
        <td><%= kakeibo.water %>円</td>
      <% end %>
      <td><%= @kakeibos.sum(:water) %></td>
    </tr>
    
    <tr>
      <th>電気代</th>
      <% @kakeibos.each do |kakeibo| %>
        <td><%= kakeibo.electric %>円</td>
      <% end %>
      <td><%= @kakeibos.sum(:electric) %></td>
    </tr>
    
    <tr>
      <th>携帯代</th>
      <% @kakeibos.each do |kakeibo| %>
        <td><%= kakeibo.telephone %>円</td>
      <% end %>
      <td><%= @kakeibos.sum(:telephone) %></td>
    </tr>
  </table>
</div>

<table border="1" style="border-collapse: collapse" data-toggle="collapse" data-target="#example-1" aria-expand="false" aria-controls="example-1">
  <tr>
    <th>合計</th>
    <% @totals.each do |totale| %>
      <td><%= totale %>円</td>
    <% end %>
    <td><%= @totals.sum %></td>
  </tr>
</table>

tableを3つに分けたので文字の長さで表の横の長さが変わっています。
th に style="width:〇〇px;"と入れて横の長さを全分統一しましょう。今回は150に合わせてみました。

<th style="width:150px;">合計</th>

表の合計の行をクリックすると表示/非表示が入れ替わると思います。

CSSを使ったり、JSを使ったりとアコーディオンメニューの方法は色々あったのですが、今回の方法が一番簡単に思えたのでこれを試してみました。

参考にした所