Web制作 jQuery

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

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

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

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

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】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行のコードが最初のコンテンツを表示させて、最初のコンテンツの矢印を開いた時の状態にするという事ですね。

 

1つ開くと他は閉じる

これも先ほどと同じ要領なので、特に説明不要かと思います。

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

2つ目のアコーディオンメニューのjQueryに先ほど追加した2行のコードを追加するだけです。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery