2022/1/18 （更新日: 2022/2/12）

【jQuery】これで作れる！アコーディオンメニュー７選【コピペOK】

Coding

アコーディオンメニューの作り方がわからない

そんな悩みにお答えします。

アコーディオンメニューはWebサイトではFAQ、Q&A、よくある質問で非常によく見かけます。

ですので必ず習得すべき実装スキルですが、初学者には非常に難敵です。

僕は最初仕組みが全然理解できなくて、まったく思うように動かせませんでした。

この記事はそんな過去の僕と同じように行き詰まっている方に向けて書きます。

アコーディオンメニューの基本パターン、応用パターン、矢印パターン、プラスマイナスパターンを網羅します。

今回の７つのパターンが使いこなせれば、もうどんなパターンが来ても大丈夫なはず。

最初はコピペでもいいのでアコーディオンメニューを思うように動かせるようになりましょう。

jQueryを使いますのでjQuery本体の読み込みを忘れずに！

読み込み方がわからない人はコチラ【初心者向け】jQuery本体を読み込む方法

1 アコーディオンメニューの作り方
2 まとめ：アコーディオンメニューを使いこなそう！

アコーディオンメニューの作り方

基本形（矢印パターン）

まずは基本となるアコーディオンメニューを見てみましょう。

See the Pen
アコーディオン1 by toshi (@toshi78)
on CodePen.

基本形はすべてのメニューが開きます。

jQueryの部分を見てください。

クリックイベントを設定するには次の書き方でしたね。

$("[対象の要素]").on("click", function() {
/* 処理内容 */
});

そして処理内容には２行コードが書かれています。

ここでは次の点だけ頭に入れておきましょう。

💡ポイント！　

クリックする要素　→　”.js-accordion-title”
展開する要素　→　”.accordion-text”

HTML

<div class="accordion-container">
  <dl class="accordion-list">
    <dt class="accordion-title js-accordion-title">タイトル1タイトル1</dt><!-- /.accordion-title -->
    <dd class="accordion-text"><p>テキスト1テキスト1テキスト1テキスト1</p></dd><!-- /.accordion-text -->
  </dl><!-- /.accordion-list -->
  <dl class="accordion-list">
    <dt class="accordion-title js-accordion-title">タイトル2タイトル2</dt><!-- /.accordion-title -->
    <dd class="accordion-text"><p>テキスト2テキスト2テキスト2テキスト2</p></dd><!-- /.accordion-text -->
  </dl><!-- /.accordion-list -->
  <dl class="accordion-list">
    <dt class="accordion-title js-accordion-title">タイトル3タイトル3</dt><!-- /.accordion-title -->
    <dd class="accordion-text"><p>テキスト3テキスト3テキスト3テキスト3</p></dd><!-- /.accordion-text -->
  </dl><!-- /.accordion-list -->
</div><!-- /.accordion-container -->

💡ポイント！　

javascript(jQuery)で動かす要素は「js-accordion-title」というCSSと別クラスをつけています。

CSS

.accordion-container {
margin: 50px auto 0;
max-width: 500px;
width: 100%;
}

.accordion-list:not(:first-child) {
margin-top: 10px;
}

.accordion-title {
background: #DDD;
cursor: pointer;
font-size: 16px;
padding: 20px 40px;
position: relative;
}

.accordion-title:after {
position: absolute;
display: block;
content: '';
top: 35%;
right: 22px;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(135deg);
transition: all .3s ease-in-out;
}

.accordion-title.open:after {
transform: rotate(-45deg);
top: 45%;
}

.accordion-text {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-bottom: 1px solid #DDD;
display: none;
padding: 20px 40px;
}

💡ポイント！　

accordion-textをdisplay: none;

テキスト部分は最初は非表示にしておいて、jQueryを使って表示させます。

💡ポイント！　

accordion-titleにopenクラスがついたときの処理を書いておく

あとでjQueryのtoggleClassによって「open」クラスがつきます。

要は「open」クラスがついたときには矢印の向きを変えるようにしています。

jQuery

$(function () {
  /*タイトルをクリックすると*/
  $(".js-accordion-title").on("click", function() {
　　 /*クリックした隣の要素を開閉する*/
    $(this).next().slideToggle(200);
　　/*タイトルにopenクラスの追加、削除を行って矢印の向きを変える*/
    $(this).toggleClass("open",200);
  });
});

💡ポイント！　

「this」は「js-accordion-title」のこと
「next」は隣の要素（＝accordion-text）のこと
slideToggle()はslideUpとslideDownを交互に行う
toggleClassはクラスの追加と削除を切り替える
（200）はアニメーションの時間（200だと0.2秒）

コードのかたまりで見るとどうなっているのかわかりにくいjQueryも、それぞれをわけて考えるとどういう動きをしているのかが見えてきます。

基本形（プラス・マイナスパターン）

これは矢印がプラス・マイナスに変わっただけでjQueryの書き方は同じです。

See the Pen
アコーディオン4 by toshi (@toshi78)
on CodePen.

CSSは今回は解説しませんが、矢印もプラス・マイナスも疑似要素を上手く使っています。

基本形（FAQパターン）

これもCSSが違うだけでjQueryの書き方は同じです。（HTMLのclass名も変えています。）

See the Pen
アコーディオン2 by toshi (@toshi78)
on CodePen.

ひとつ開けたら他は閉じる（矢印パターン）

See the Pen
Untitled by toshi (@toshi78)
on CodePen.

jQueryのコードが少し複雑になります。

$(function () {
  /*タイトルをクリックすると*/
  $(".js-accordion-title").on("click", function() {
    /*クリックしたjs-accordion-title以外のopenクラスを削除*/
    $(".js-accordion-title").not(this).removeClass("open");
    /*クリックしたjs-accordion-title以外の要素を閉じる*/
    $(".js-accordion-title").not(this).next().slideUp(200);
    /*クリックしたjs-accordion-titleにopenクラスを付与*/
    $(this).toggleClass("open");
    /*js-accordion-titleの隣の要素であるaccordion-textを開閉*/
    $(this).next().slideToggle(200);
  });
});

💡ポイント！　

not()は除外対象の要素を指定
not(this)はクリックした.js-accordion-title以外という意味
removeClass()は外すclass名を指定

ひとつ開けたら他は閉じる（プラス・マイナスパターン）

See the Pen
Untitled by toshi (@toshi78)
on CodePen.

jQueryは上と同じです。

最初のコンテンツは開いておく

See the Pen
アコーディオン6 by toshi (@toshi78)
on CodePen.

これは最初にあったアコーディオンメニューのコードに２行追加します。

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

💡ポイント！　

css()　→　.css(プロパティ,値)でcssプロパティを指定

/*最初のコンテンツは表示する*/
$(".accordion-list:first-of-type .accordion-text").css("display", "block");
/*最初の矢印の向きを開いている状態に変えておく*/
$(".accordion-list:first-of-type .accordion-title").addClass("open");