【コピペOK！】jQueryで矢印付きアコーディオンメニューを作る方法

アコーディオンメニューってどうやって作るの？

アコーディオンメニューはよくある質問ページ（Q&A）などに良くありますね。

実務でも使う機会は非常に多いです。

このページのコードをどこかにコピペしておくと便利かと思います。

またアコーディオンメニューといっても色々種類があるので、今回はよく使う物をご紹介していきたいと思います。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

jQueryで矢印付きアコーディオンメニューを作る方法

まずはjQueryを使用するのでjQuery本体を読み込みましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

あわせて読みたい

: 【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る

それでは最初に基本となるアコーディオンメニューを見てみます。

この基本形では全てのメニューを開く事が出来ます。

See the Pen
アコーディオンメニュー（基本形） by junpei (@junpei-sugiyama)
on CodePen.

HTMLとCSSはこの記事で出てくる全てのアコーディオンメニュー共通となっています（矢印のCSSは別です）

タイトルの.accordion-titleをクリックすると.accordion-contentが開きます。

それではコードを見ていきます。

まずCSSは基本的な箇所は省き、ここで注意するのはこちらです。

.accordion-content {
  display: none;
}

これはコンテンツ部分で、アコーディオンメニューを開く前は非表示にしていて、表示する時はjQueryを使って表示させます。

次はjQueryを見てみます。

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

ここで使われているイベントやメソッドについては以下になります。

on(click)

"クリックしたら処理を行う"というクリックイベント

next()

指定した要素の次の兄弟要素を対象にする

slideToggle()

slideUp()とslideDown()を併せ持つメソッド
要素が非表示の場合はslideDown()を実行
要素が表示されてる場合はslideUp()を実行

slideDown()

要素を上から下へスライドさせながら表示させる

slideUp()

要素を下から上へスライドさせながら非表示させる

toggleClass()

指定したclassを付け外し出来る

以上です（ slideDown() と slideUp() は slideToggle() の説明のため記載）

つまりこのアコーディオンメニューはこのようになります。

$(function () {
  // タイトルをクリックすると
  $(".js-accordion-title").on("click", function () {
    // クリックした次の要素(コンテンツ)を開閉
    $(this).next().slideToggle(300);
    // タイトルにopenクラスを付け外しして矢印の向きを変更
    $(this).toggleClass("open", 300);
  });
});

先ほどコンテンツを表示する時はjQueryを使って表示させますと書きましたが、これは$(this).next().slideToggle(300);の所になりますね。

これによりCSSでdisplay: none;だったのがdisplay: block;に変わります（検証モードで見ると分かります）

またコードの中に300という数字がありますが、これはアニメーションの時間になります。

単位はミリ秒なので、300の場合は0.3秒となります。

また数字の他に'slow'、'normal'、'fast'と指定する事も出来るので、色々試してみて下さい。

矢印のアニメーション

矢印のアニメーションですが、CSSはこちらになります。

.accordion-title {
  position: relative;
}
.accordion-title::after {
  border-right: solid 2px #fff; // 矢印の色
  border-top: solid 2px #fff; // 矢印の色
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg); // 最初の矢印は下向き
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 8px;
}
.accordion-title.open::after {
  top: 45%; // 矢印の位置を少し変える
  transform: rotate(-45deg); // 矢印を上向きに変える
}

最後の.openはjQueryのtoggleClass()で付けたclassで、タイトルがクリックされたら付与されます。

そして.openが付いたら矢印の向きと位置を変えます。

位置は少し調整しないと中央からズレて見えるので、ここで調整しています。

注意ポイント

"transition" は "transition: all .3s ease-in-out;" でもここでは問題ありませんが、allにすると予期せず無関係の箇所でアニメーションが効いてしまう事があるので、なるべく1つずつ設定するようにしています。

アコーディオンメニューのコンテンツを1つ開けると他は閉じる

先ほどは全てのメニューを開くことが出来ましたが、今度は1つしか開けないようにします。

See the Pen
アコーディオンメニュー（1つ開くと他は閉じる） by junpei (@junpei-sugiyama)
on CodePen.

先ほどとjQueryのコードが少し変わっています。

$(function () {
  $(".js-accordion-title").on("click", function () {
    $(".js-accordion-title").not(this).removeClass("open");
    $(".js-accordion-title").not(this).next().slideUp(300);
    $(this).toggleClass("open");
    $(this).next().slideToggle(300);
  });
});

先ほどなかったメソッドについては以下になります。

not()

()内に除外したい要素を指定

removeClass()

()内に外したいclass名を指定

ここではnot()で除外したい要素はthisなので、クリックしたタイトルの事になります。

また今回は矢印ではなく、＋－にしてあります。

実務では矢印と＋－のどちらかである事が大半ですが、個人的には＋－の方が多い印象です。

＋－のアニメーション

＋－のアニメーションですが、CSSはこちらになります。

.accordion-title {
  position: relative;
}
/* 縦線 */
.accordion-title::before {
  background: #fff; /* 線の色 */
  content: "";
  height: 2px; /* 線の太さ */
  position: absolute;
  right: 25px;
  top: 50%; /* 線の位置を縦中央に */
  transform: rotate(90deg); /* 線を縦に */
  transition: transform .3s ease-in-out;
  width: 15px; /* 線の幅 */
}
/* 横線 */
.accordion-title::after {
  background: #fff; /* 線の色 */
  content: "";
  height: 2px; /* 線の太さ */
  position: absolute;
  right: 25px;
  top: 50%; /* 線の位置を縦中央に */
  transition: opacity .3s ease-in-out;
  width: 15px; /* 線の幅 */
}
/* 縦線(クリック後) */
.accordion-title.open::before {
  transform: rotate(180deg);
}
/* 横線(クリック後) */
.accordion-title.open::after {
  opacity: 0;
}

最後の.openで縦線は横線になり、横線はopacity: 0;なので透明になり見えなくなります。

これにより縦線が横にパタッと倒れるような動きになります。

そして新しく出てきたjQueryのメソッドの説明を加えるとこのようになります。

$(function () {
  // タイトルをクリックすると
  $(".js-accordion-title").on("click", function () {
    // クリックしたタイトル以外のopenクラスを外す(－から＋にする)
    $(".js-accordion-title").not(this).removeClass("open");
    // クリックしたタイトル以外のコンテンツを閉じる
    $(".js-accordion-title").not(this).next().slideUp(300);
    // クリックしたタイトルにopenクラスを付け外しして＋と－を切り替える
    $(this).toggleClass("open");
    // クリックしたタイトルの次の要素(コンテンツ)を開閉
    $(this).next().slideToggle(300);
  });
});

先ほどはタイトルをクリックしたらコンテンツが開きっぱなしでしたが、今回はクリックした箇所以外のコンテンツを.slideUp()で閉じ、.removeClass("open")で－を＋と閉じた状態にしています。

アコーディオンメニュー最初のコンテンツは開いておく

ここまでは全て閉じている状態でしたが、今回は最初のコンテンツだけ開いた状態にします。

『全て開くことが可能』と『1つ開けると他は閉じる』の2パターンを見てみます（右下のRerunをクリックすると初期状態に戻ります）

全て開くことが可能

See the Pen
アコーディオンメニュー（最初のコンテンツは開く） by junpei (@junpei-sugiyama)
on CodePen.

今回のjQueryはこちらになります。

$(function () {
  $(".accordion-item:first-of-type .accordion-content").css("display", "block");
  $(".accordion-item:first-of-type .js-accordion-title").addClass("open");
  $(".js-accordion-title").on("click", function () {
    $(this).next().slideToggle(300);
    $(this).toggleClass("open", 300);
  });
});

これは2行目と3行目のコードが1番目のアコーディオンメニューのコードに追加された形です。

今回新しく登場したメソッドはこちらです。

css()

.css( プロパティ, 値 )という形でcssプロパティを指定

addClass()

()内に付与したいclass名を指定

これを踏まえると以下のような意味になります。

$(function () {
  // 最初のコンテンツは表示
  $(".accordion-item:first-of-type .accordion-content").css("display", "block");
  // 最初の矢印は開いた時の状態に
  $(".accordion-item:first-of-type .js-accordion-title").addClass("open");
  // タイトルをクリックすると
  $(".js-accordion-title").on("click", function () {
    // クリックした次の要素を開閉
    $(this).next().slideToggle(300);
    // タイトルにopenクラスを付け外しして矢印の向きを変更
    $(this).toggleClass("open", 300);
  });
});

今回追加された2行のコードが最初のコンテンツを表示させて、最初のコンテンツの矢印を開いた時の状態にするという事ですね。