クリックやタップでコンテンツの開閉をする
jQueryを使ったアコーディオンの実装をコード付で解説

2023.11.22

JavaScript・jQuery

クリックやタップでコンテンツの開閉をするjQueryを使ったアコーディオンの実装をコード付で解説

一般的なWebサイトを作っていく際に、最近ではコンテンツが多くなりがちのため、一部を開閉式にして隠しておくという仕様を取る事も多くなってきています。

長くなってしまいがちなコンテンツを隠しておくことができるため、文字数を気にしすぎず作る事ができる、縦長になりすぎる心配をしなくて良い、レイアウトに気を遣わなくてよくなるといったメリットが出てきます。

実際、特徴を述べるコンテンツだったり、自分たちのストロングポイントなどを打ち出す場、よくある質問、そういったところなどでは見出しや一部だけを表示しておき、「＋」などをクリック・タップすることで詳細を見る事ができるようになっています。

今回はそんなクリック・タップしたら開閉するアコーディオンについて見ていきたいと思います。

この記事の目次

jQueryを使ったコードの方が管理・メンテが楽

こういった動きのあるものは、JavaScriptの中でも多くはjQueryなどを使って使われる事が多いですが、アコーディオンであれば、実はjQueryを使わなくても実装する事は可能です。

ただそうなると結構コードも長くなってしまいますし、何かちょっと変更を加えると思っても時間がかかったり、ミスも生じやすいのでjQueryを使ってアコーディオンを設置するのがおすすめです。

jQueryをサイトに使っていないという場合は、アコーディオンのためだけにjQueryを読み込むというのもやや微妙なケースかもしれませんが、そうでなく既にjQueryを使っている場合はjQueryを使って書いていく方が結果的に楽でミスも減って良いかと思います。

実際のコードや実装について

では実装する方法について見ていきましょう。

今回紹介するアコーディオンは3種パターン

その前に、今回アコーディオンでの開閉については実は3種パターンがあります。

クリックすると開閉する基本パターン
1つ目は最初から開いておくパターン
1つ開けると他は閉じる1つしか開けないパターン

サイトや使うコンテンツ等の仕様によって色々変わってきますが、大きくアコーディオンはこの3パターンに分かれます。

とはいえ、一番最初の基本パターンから少しカスタマイズをしていく形になるので、まずは基本パターンをしっかり抑え、そこから派生させていくようにしましょう。

まずはjQueryを読み込んでおく

もはや当たり前というか定番ですが、jQueryを使うため事前に読み込んでおきましょう。
何度も書いてきてはいますが、CDNを使って読み込むのがおすすめです。

jQueryの読み込み。CDNを使う方法とコードを書く場所や読み込む順番: jQueryと言えば、Webサイト制作においては非常に重宝され無くてはならないとまではいかなくとも多くのサイトで使われているものになります。脱jQu...

実際のそれぞれのコード

実際にHTMLのコードを見ていきましょう。

<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツ</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツ</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツ</p>
  </div>
</div>

.accordion {
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.accordion__title {
  padding: 15px 50px 15px 15px;
  color: #333;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
}

.accordion__content {
  display: none;
  padding: 0 15px 15px;
}

$(function() {
  $('.accordion__title').on('click', function() {
    $(this).next().slideToggle('fast');
  });
});

実際に全く同じコードで書いたデモ・サンプルを下記から確認できます。

デモページ

コードの解説

では、それぞれ解説していきます。

HTMLのコード解説

<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツ</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツ</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツ</p>
  </div>
</div>

大事なのは、accordion__titleと、accordion__contentのこの2つです。
後述するJSにて、最初からアコーディオンのコンテンツ部分は非表示として隠しておき、見出し部分がクリック・タップされた時に、非表示を解いて表示する。という仕組みになっています。

また、今回は例としてdivで全て囲っていますが、実際に使うタグに制限はないため、開閉させる見出しのところをh2やh3などの見出し系にしても良いですし、枠をdl、見出し部分をdtとし、アコーディオンコンテンツをddとする形でも使えます。

<!-- 見出しを使うパターン -->
<div class="accordion">
  <h2 class="accordion__title">見出し（クリック・タップで開閉）</h2>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツ</p>
  </div>
</div>

<!-- dl dt ddを使うパターン -->
<dl class="accordion">
  <dt class="accordion__title">見出し（クリック・タップで開閉）</dt>
  <dd class="accordion__content">アコーディオン用のコンテンツ</dd>
</dl>

使うタグに制限はなく、見出しの部分のクラス名、アコーディオンで開閉するコンテンツ部分のクラス名がしっかりJavaScriptの部分と合っていれば問題ありません。

下記に、最初のデモ分からHTMLのコードを、divだけのもの、見出しをh2にしたもの、dl・dt・ddにしたものと分けて書いていますが、全く同じ見た目で同じ動作をしているのが確認できるはずです。

デモページ

CSSのコード解説

.accordion {
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.accordion__title {
  padding: 15px 50px 15px 15px;
  color: #333;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
}

.accordion__content {
  display: none;
  padding: 0 15px 15px;
}

書いているcssのコードのほとんどは装飾用で記載しているので、アコーディオンの動作として必要なのは背景色を変えている16行目のこの1箇所のみです。

display: none;で、アコーディオンのコンテンツ部分をデフォルト状態で非表示にしています。最初から非表示にしておくことで、見出しをクリックされたら表示する。と流れになっています。

JavaScript（jQuery）のコード解説

$(function() {
  $('.accordion__title').on('click', function() {
    $(this).next().slideToggle('fast');
  });
});

JSのコードはこれだけですが、特に大切なのが3行目で、slideToggleを使う事で、簡単にアコーディオンが完成します。たったこれだけで完成するのはjQueryだからこその恩恵とも言えますね。

slideToggleは簡単に言えばjQueryで予め用意されているメソッドで、呼び出し元の要素が「表示」となっている場合であればその要素を「非表示」にし、逆に呼び出し元の要素が「非表示」になっている場合であればその要素を「表示」するものになります。

そのためこれを使うだけで、要素の表示・非表示を簡単に設定する事ができます。
（）の中は、アニメーションの速度をミリ秒の単位で入れる事で設定ができ、例ではミリ秒ではなくfastを設定しています。

1点注意としては、

// fast,slowなどの時は''が必要
$(this).next().slideToggle('fast');

// 数字指定の時は''が不要
$(this).next().slideToggle(500);

このように、値を指定する際にfastやslowなどの文字で指定する場合はクオーテーションが必要になりますが、ミリ秒の数字を直接記載する時はクオーテーションを入れると正常に動かないため、クオーテーションは無しで記載する必要があります。

これらの設定で、上記に記載してたデモページのようにアコーディオンが表示する事ができます。

1つめだけは最初から表示した状態にする方法

この開閉するアコーディオンをサイト制作に取り入れるときに、全部を隠してしまうと、そもそもユーザーがアコーディオンで開閉できるということがわからない可能性もあるかも？という心配をする時があります。

そういった時のため、アコーディオンを使う際には1つめだけは最初から表示しておき、2つめ以降は閉じておきクリック・タップで表示するという方法を取ることがあります。今回はそんな1つ目は最初から表示しておく方法を見ておきましょう。

変えるのはcssかJavaScriptのコードだけ

実は基本系から、CSSで設定するか、JavaScriptで設定するかだけで実装ができます。

CSSで設定する場合

.accordion:first-of-type .accordion__content{
  display: block;
}

要はfirst-of-typeを使うことで最初だけはdisplay: none;としているコンテンツ部分を1個目だけは表示するという設定を行います。

デモページ

JavaScriptで設定する方法

$(function() {
  $(".accordion:first-of-type .accordion__content3").css("display","block");
  $('.accordion__title').on('click', function () {
    $(this).next().slideToggle('fast');
  });
});

こちらもやっている事はcssと同じで、それをJavaScriptで書いているというだけになります。

ただ注意点としては、JavaScriptで設定した場合、CSSと違い一度ページを読み込んだ後にこの設定をする形となるため、一瞬だけカクッとした形での表示になります。

そのため、ページのファーストビューの箇所で使うとどうしても一瞬のチラつき、カクつきが気になるという方もいるかと思いますので、その際はcssでの設定にしておいた方が無難です。

デモページ

ただ個人的にコーディングをする方の多くはJSのコードを書くよりは、cssのコードで管理する方が見慣れているというか理解しやすいのではないかと思うので、cssの方がわかりやすいかもしれません。

cssの設定でもjsの設定でも1つめが最初から表示されているという点や、クリック・タップしたら開閉するというのは全く同じになりますので、やりやすい方で管理すると良いかなとは思います。

アコーディオンで開けるのは1つだけに絞る方法

アコーディオンはデフォルト状態ですと、開けていくとどんどんコンテンツが縦長に広がっていきます。それが良い悪いは別として、サイトやコンテンツによってはそれを避けたいというシーンもまた出てきます。

そういった場合は、アコーディオンで開けることができるのは1つだけにして、他を開けると今開けているアコーディオンは自動的に閉じるという設定にすることで、どんどん縦長になるのを避ける事ができます。

よくある質問などのように多くのリストが並んでいる場合などはこの方法を取られる事も多いように感じます。

実際のコード

$(function() {
  $('.accordion__title').on('click', function() {
    $(".accordion__title").not(this).next().slideUp('fast');
    $(this).next().slideToggle('fast');
  });
});

追加するのはこの3行目になります。
要は、簡単に説明すると、

accordion__titleの要素をクリックした時
今クリックした要素（this）以外（not）のaccordion__titleでslideup(‘fast’);を実行（＝アコーディオンを閉じる）
今クリックした要素でslideToggle(‘fast’);を実行（＝アコーディオンを開く）

という流れになっています。
$(".accordion__title").not(this)というのが、今クリックした要素以外の.accordion__titleとなるため、それによってクリックした要素以外のアコーディオンは閉じて、クリックしたアコーディオンを開くため、クリックした1つしか開かないという仕組みになります。

デモページ

実用向けの装飾を入れたコードの紹介

アコーディオンについて色々設定してきました。
実際にどれを使うかというのは、サイトや使う場所・コンテンツなどによって変わってくるかとは思います。

ただ実際に、このアコーディオンを使う時はもう少し装飾を入れたもの、例えば下記のようなものが求められる事が多いです。

開閉の際にわかりやすく「＋」「ー」を入れたい
開閉できると視覚的にわかるように色を変えたい
見出しとアコーディオンで隠したところで装飾を変えたい

こういった事はよくありますし、実際にほとんどの実務では装飾を入れて使う事が多いです。ということで、最後に実用に向けた装飾を入れたサンプルコードなども紹介しておきます。

それぞれのサンプルコード

<div class="accordion">
  <div class="accordion__title active">見出し（クリック・タップで開閉）1</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツが入ります。</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）2</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツが入ります。</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）3</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツが入ります。</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）4</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツが入ります。</p>
  </div>
</div>
<div class="accordion">
  <div class="accordion__title">見出し（クリック・タップで開閉）5</div>
  <div class="accordion__content">
    <p>アコーディオン用のコンテンツが入ります。</p>
  </div>
</div>

.accordion {
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #f6f6f6;
}

.accordion__title {
  position: relative;
  padding: 15px 50px 15px 15px;
  color: #333;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  background: #f6f6f6;
  transition: all 0.3s;
}

.accordion__title.active {
  color: #fff;
  background: #666;
}

.accordion__title::before,
.accordion__title::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 15px;
  width: 15px;
  height: 3px;
  margin: auto 0;
  background-color: #666;
  transition: all 0.3s;
}

.accordion__title.active::before,
.accordion__title.active::after{
  background: #fff;
}

.accordion__title::after {
  transform: rotate(90deg);
}

.accordion__title.active::before {
  transform: rotate(180deg);
}

.accordion__title.active::after {
  transform: rotate(180deg);
  opacity: 0;
}

.accordion__content {
  position: relative;
  display: none;
  margin: 15px;
  padding: 15px;
  background: #fff;
  border-radius: 3px;
}

$(function() {
  $(".accordion:first-of-type .accordion__content").css("display","block");
  $('.accordion__title').on('click', function() {
    $(this).next().slideToggle('fast');
    $(this).toggleClass("active");
  });
});

実際にこれらの装飾をつけて実用向けに設定したアコーディオンのデモが下記になります。

デモページ

実際に使う際はこういった見せ方で使う事が多いのでは無いかと思いますので、参考にしてみてください。

まとめ

今回はアコーディオン開閉でコンテンツを隠したり見せたりする方法についてまとめてみましたが、実際のサイト制作のコーディングでも非常に最近では多様されているように感じます。

特にスマホでの閲覧が多くなったことからどのコンテンツは見せて、どのコンテンツはいったん隠しておくのかなどの取り決めをする事が増えた気もします。

よくある質問などでは多くのサイトでも使われていますし、ランディングページの制作やコーディングなどでも、特徴や競合他社との違いなどを見だしだけいったん表示して、詳細はクリックで確認できるといった見せ方などもよく使われたりもします。

jQueryを使わないとコードがかなり大変な事になりますがjQueryを使う事でとても簡単でシンプルに作る事ができますし、開閉の見出しとコンテンツ部分のタグなどに制限もないため、慣れれば非常に簡単で基本の形を応用させることで多くのサイトに使って行くことも出来るため、覚えておいて損は無いかと思います。

記事のシェアにご協力お願いします