[初学者向け] jQueryでアコーディオンの実装方法

はじめに

jQueryを使用したアコーディオンの実装方法を、初学者の方にもわかりやすいように丁寧に解説します。
完成形はこちらです。

See the Pen OJXdmjv by yuzuyuzu0830 (@yuzuyuzu0830) on CodePen.

矢印つきで、一番上のコンテンツは開いた状態にします。
また、他のコンテンツが開いた時には、開いていたコンテンツは閉じるように実装していきます。

HTML/CSSを書く

わかりやすくするため、シンプルなコードを書いていきます。
まずはHTMLから

index.html

<div class="ac">
  
 <div class="ac-title">タイトル1</div>
  <div class="ac-content open">
   <p>タイトル1の内容</p>
  </div>
  
 <div class="ac-title">タイトル2</div>
  <div class="ac-content">
   <p>タイトル2の内容</p>
  </div>
  
 <div class="ac-title">タイトル3</div>
  <div class="ac-content">
   <p>タイトル3の内容</p>
  </div>

</div>

acクラスでアコーディオン全体を囲っています。
ac-titleがクリックをする箇所、ac-contentがクリックをした時に見える内容です。

また、一番上ののac-contentにのみopenクラスもつけています。こちらは、一番上のコンテンツは開いた状態にしておくためです。この後CSSで解説します。

続いてCSSです。

style.css

/* アコーディオンのサイズ */
.ac {
  width: 100%;
  max-width: 500px;
}

/* クリックする箇所 */
.ac-title {
  height: font-size: 15px;
  background-color: #FFCCFF;
  position: relative;
  padding: 10px;
}

/* 矢印 */
.ac-title:after {
   content: "";
   position: absolute;
   right: 25px;
   top: 38%;
   transition: all 0.2s ease-in-out;
   width: 8px;
   height: 8px;
   border-top: 2px solid #000;
   border-right: 2px solid #000;
   transform: rotate(135deg);
 }

/* 開いた時に矢印の向きを変える */
.ac-title.open:after {
  transform: rotate(-45deg);
}

/* 隠れているコンテンツ */
.ac-content {
  background-color: #FFFFCC;
  padding: 15px 10px;
  display: none;
}

/* 一番上のコンテンツは開いた状態にしておく */
.open {
display: block;
}

.ac-contentは隠れている状態にしたいので、display: noneで見えない状態にしています。
ただ、一番上のコンテンツははじめから開いている状態にしたいので、先ほど一番上の.ac-titleだけにつけたopenクラスはdisplay: blockで見えている状態にしています。

また、矢印は擬似要素で作成しています。
border-topとborder-rightで線を作成し、rotateで回転させています。
コンテンツが開いたときは矢印の向きを変えたいので、こちらもrotateの数値を変更することで向きが変わる仕組みになっています。

jQueryを書く

js

$(function() {
 $('.ac-title:first-of-type').addClass('open');
  // クリックでコンテンツを開閉する
 $('.ac-title').on('click', function() {
  $(this).next().slideToggle();
   // 矢印の向きを変える
 $(this).toggleClass('open');
   // クリックしていないac-title以外のコンテンツからopenをとり、コンテンツを閉じる
 $('.ac-title').not($(this)).removeClass('open').next().slideUp();
 });
});

解説していきます。

$('.ac-title:first-of-type').addClass('open');

まず、一番上のコンテンツはcssでdisplay: blockにより見える状態にしましたが、矢印の向きは閉じている時と同じ状態になっています。
そのため、一番上のac-titleにだけaddClassでopenクラスをつけることにより、矢印の向きもコンテンツが開いてる時の向きに変更します。

$('.ac-title').on('click', function() {
  $(this).next().slideToggle();

.ac-titleをclickした時の動きを指定しています。
thisはac-titleのことです。.next()は隣の要素を指すので、今回の場合はac-contentになります。
また、.slideToggle()は要素をアップダウンさせるメソッドです。そのため、ac-contentが表示されていなければslideUpをし、要素が表示されていればslideDownをしてくれます。
その切り替えをclickによって行なっています。

$(this).toggleClass('open');

.toggleClass()は要素に対してクラスのつけ外しをしてくれるメソッドです。
この場合は、openクラスがついていなければopenクラスを付与し、付与されていればopenクラスを外してくれます。
先ほど、cssでopenクラスがついている時は矢印の向きが変わるように指定したので、openクラスのつけ外しにより、矢印の向きを変更することができます。

$('.ac-title').not($(this)).removeClass('open').next().slideUp();

.removeClass()によってクリックされていない要素からは、openクラスを外すことができます。そして、.next()は隣の要素を指すので、ac-contentを.slideUp()メソッドにより閉じています。

最後に

今回はjQueryを使用してアコーディングメニューを作成する方法をご紹介しました。
HTML/CSSはかなりシンプルな構成になっているので、ご自身のデザインに合わせて変更をしてみてください。