【jQuery】アコーディオンメニューの作り方！

2022.03.312022.04.01

悩んでいる人

アコーディオンメニューを作りたいんだけど、どうやって作ったらいいんだろう？

悩んでいる人

「よくある質問」のページで、開いたり閉じたりするやつ作りたい！

本記事では上記の悩みを解決します！

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

本記事では、よく実装する「アコーディオンの実装方法」について解説します！

よくある質問（FAQ）ページに使われることが多い機能で、実装依頼を受けること多い機能ですね^^

基本コピペしてもらえば動くようにしていますので、よくわかんないって人も本記事を読んでいただければどうやって作るかも分かるように解説しています！なので、仕組みを理解して応用していきたいって人にも役立つ記事になるかと思います！

それでは行きましょう！

アコーディオンメニューを作ろう！

アコーディオンって？

アコーディオンメニューとは、Aの項目をクリックするとBの項目が開くようなメニューの形式のことです！

先程GIFで確認いただいたような、質問の項目をクリックすると、回答が開くようなメニューのことですね^^

HTML / CSSの書き方

See the Pen 【jQuery】アコーディオン / 基本形 by TakahiroOkada (@okalog) on CodePen.

HTML

<div class="c-accordion">
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります</div>
  </div>
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります</div>
  </div>
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります</div>
  </div>
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります</div>
  </div>
</div>

HTMLでは、c-accordion__itemで質問・回答を1つのまとまりとして作っています。

js-accrodion__titleやjs-accordion__bodyのようなプリフィックスにjs-がついているものについては、jQueryやJavaScriptで操作するとき用のクラスとして付与しています。

スタイリングにあてるクラスと jQueryやJavaScriptで操作するクラスは別にしておくほうが管理上よいので必ず分けるようにしましょう。

CSS

.c-accordion__title{
  position: relative;
  font-size: 20px;
  cursor: pointer;
  padding: 10px 20px;
  margin-bottom: 0;
  background-color: #1c273e;
  color: #efeeea;
}
.c-accordion__title::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 10px;
  height: 2px;
  transform: rotate(90deg);
  background: #efeeea;
  transition: all .3s ease-in-out;
}
.c-accordion__title::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  /*横線*/
  width: 10px;
  height: 2px;
  background: #efeeea;
  transition: all .2s ease-in-out;
}
/* オープンした時 */
.c-accordion__title.is-open::before{
  transform: rotate(135deg);
}
.c-accordion__title.is-open::after{
  transform: rotate(45deg);
}
.c-accordion__body{
  display: none;
  font-size: 20px;
  padding: 10px 20px;
  border: 1px solid #1c273e;
}

特に特記することはないですが、あえて書くとしたら開いているときと閉じているときで＋と−が切り替わるところですかね。

下記のように擬似要素で表現しています。
jQueryでオープンしたときに.is-openを.c-accordion__titleに付与するようにしているのですが、そのときにtransformプロパティの値を変更することで開く・閉じるを表現しています。

.c-accordion__title::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 10px;
  height: 2px;
  transform: rotate(90deg);
  background: #efeeea;
  transition: all .3s ease-in-out;
}
.c-accordion__title::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  /*横線*/
  width: 10px;
  height: 2px;
  background: #efeeea;
  transition: all .2s ease-in-out;
}
/* オープンした時 */
.c-accordion__title.is-open::before{
  transform: rotate(135deg);
}
.c-accordion__title.is-open::after{
  transform: rotate(45deg);
}

jQueryの書き方

$(function(){
  $(".js-accordion__title").on("click",function(){
    $(this).toggleClass("is-open");
    $(this).next().slideToggle(300);
  })
})

.js-accordion__titleをクリックしたときのイベントを取得しています。

$(this).toggleClass("is-open");では、開く・閉じるを表現するための.is-openをtoggleClassメソッドを使って実装しています。

$(this).next().slideToggle(300);では、回答部分の表示・非表示をslideToggleメソッドを使って実装しています。

実装パターンの紹介！

基本形

最初は全て閉じていて、クリックしたときに表示される仕様です。（上記で説明したコードと同じです。）

See the Pen 【jQuery】アコーディオン / 基本形 by TakahiroOkada (@okalog) on CodePen.

$(function(){
  $(".js-accordion__title").on("click",function(){
    $(this).toggleClass("is-open");
    $(this).next().slideToggle(300);
  })
})

最初の1つだけ開いている

最初の項目だけ開けておきたいというときに便利です。

See the Pen 【jQuery】アコーディオン / 最初の１つ開いておく by TakahiroOkada (@okalog) on CodePen.

1つ目の.c-accordion__itemの.c-accordion__titleに.is-openを付与しておきます。

ここの記述で、＋ボタンを開いた状態にしておくことができます。

<div class="c-accordion">
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title is-open">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります</div>
  </div>
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります</div>
  </div>
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります</div>
  </div>
  <div class="c-accordion__item">
    <h2 class="c-accordion__title js-accordion__title">よくある質問が入ります。</h2>
    <div class="c-accordion__body js-accordion__body">質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります質問の回答が入ります</div>
  </div>
</div>

$(".c-accordion__item:first-child .c-accordion__body").css("display","block")でdiplay:noneで非表示にしていた.c-accordion__bodyを表示するようにしています。

$(function(){
  $(".c-accordion__item:first-child .c-accordion__body").css("display","block")
  $(".js-accordion__title").on("click",function(){
    $(this).toggleClass("is-open");
    $(this).next().slideToggle("is-open");
  })
})