[Rails]JavaScript(jQuery)を使ったアコーディオンメニュー

今回はクリックしたら開閉できるアコーディオンメニューの実装をしていきます。
メニューの中身は最初隠していて、クリックで出てきて、しまうとまた隠れるので、色々なところで使える便利な機能です。

完成イメージはこちらです。

![スクリーンショット 2021-07-14 9.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1554142/876e5a78-9cea-e05b-507d-878f6e14d0f9.png)

画像なので動きがないので、確認したい方は、ぼくの[ポートフォリオ](https://oogiri-legendroad.com/homes/guide)を確認してみてください。
下部のQ＆Aが同じ手順で実装しています。

それではいってみましょう！

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

- jQueryが使える状態
- homes/topビューで実装していきます
- Bootstrapのcardを使っています(別にcardじゃなくても問題なく動きます）

#手順

アコーディオンメニューを実装する手順は`3ステップ`です！

- ビューに要素を配置
- CSSを追加
- メニューを開閉する動きをつける

#ビューに要素を配置

まずはビューにアコーディオンメニューのタイトルと中身を配置していきます。
ここでいうタイトルは常に表示されていてクリックする部分、中身はタイトルがクリックに応じて表示や非表示になる部分。

```erb:views/homes/top.html.erb
<!--accordion-containerの中にtitleとontentを配置-->
<!--cardとcard-bodyはBootstrapのものなので使わない方は無視してください-->
<div class="card accordion-container">
  <div class="card-body accordion-title js-accordion-title">
    これを押すと
  </div>
  <div class="card-body accordion-content">
    開きます
  </div>
</div>
```

これで１つのアコーディオンメニューになります。
これをあと２つ追加します。

```erb:views/homes/top.html.erb
<!--accordion-containerの中にtitleとontentを配置-->
<!--cardとcard-bodyはBootstrapのものなので使わない方は無視してください-->
<div class="card accordion-container">
  <div class="card-body accordion-title js-accordion-title">
    これを押すと
  </div>
  <div class="card-body accordion-content">
    開きます
  </div>
</div>
<!--１つ目と同じでテキストだけ変えたもの-->
<div class="card accordion-container">
  <div class="card-body accordion-title js-accordion-title">
    当然これも
  </div>
  <div class="card-body accordion-content">
    開きます
  </div>
</div>
<!--１つ目と同じでテキストだけ変えたもの-->
<div class="card accordion-container">
  <div class="card-body accordion-title js-accordion-title">
    これも絶対に
  </div>
  <div class="card-body accordion-content">
    開きます
  </div>
</div>
```

#CSSを追加

次にCSSを追加していきます。

CSSでは、
①デザイン
②中身を非表示
③トグルのデザイン
に関する記述をしていきます。

```assets/stylesheets/homes.scss
// アコーディオンメニューデザイン
.accordion-container .accordion-title {
  color: #fff;
  background: #343a40 ;
  cursor: pointer
}
// カーソルが乗ったときのデザイン
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
  background-color: #000000;
  color: white;
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}
// 最初は隠しておく
.accordion-content {
  display: none;
}
// トグルの位置固定
.accordion-title{
  position: relative;
}
// トグルのデザイン
.accordion-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.accordion-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}
```

トグルの実装方法がむずかしくて、ぼくもうまく言語化できないので、もっと詳しく知りたい方はご自身でお調べください。
デザイン等も各自いい感じにカスタマイズしてみてください。

#メニューを開閉する動きをつける

最後にクリックを起点にアコーディオンメニューを開閉、トグルの向きを変更する処理を書いていきます。

```assets/javascripts/application.js
// アコーディオンメニュー
// Turbolinks無効化(詳しくは過去記事参照)
$(document).on('turbolinks:load', function() {
  $(function(){
    $('.js-accordion-title').on('click', function () {
      /*クリックでコンテンツを開閉*/
      $(this).next().slideToggle(200);
      /*矢印の向きを変更*/
      $(this).toggleClass('open', 200);
    });
  });
});
```

Turbolinksに関する記事はこちら
[[Rails]リロードしないとJavaScript(jQuery)が動かない問題](https://qiita.com/nakachan1994/items/974f1d3c17d43446acb9)

これで無事にアコーディオンメニューが実装できました！

#まとめ

アコーディオンメニューを実装する手順は`3ステップ`です！

>- ビューに要素を配置
>- CSSを追加
>- メニューを開閉する動きをつける

アコーディオンメニューはかなり汎用性が高いので、いろんな場所で実装して動きのある楽しいアプリ、サイトにしていきましょう！

最後までありがとうございました。