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 %>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514815/c5e6e90f-1b31-64b8-9889-105de1dd71a1.png)
表示できたので表にしましょう。
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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514815/bd104e8c-91ee-b237-6b88-3bc754717981.png)

表として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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514815/edcdcad9-2b16-ce5c-9a7e-257c2cc558de.png)
合計が出来たので、合計を押した際の表示/非表示（アコーディオンメニュー）を作ります
①合計の分を別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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514815/705f4c0d-e6ad-facc-0743-d320c4b81a87.png)
tableを3つに分けたので文字の長さで表の横の長さが変わっています。
th に style="width:〇〇px;"と入れて横の長さを全分統一しましょう。今回は150に合わせてみました。

```
<th style="width:150px;">合計</th>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514815/311776b3-f4e0-abe5-a0b9-027ff4dfe2b9.png)

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

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


### 参考にした所
http://www.tohoho-web.com/bootstrap/collapse.html