【コピペOK】初心者でも5分でできる！jQueryで超簡単にアコーディオンを実装！

こんにちは！さこちゃんです。
今回はコーディング初心者でもわかるように、

jQueryで簡単に
アコーディオンを実装する方法 を紹介します！

今回の記事はこんな方におすすめです。

• Web制作を始めたばかりの初心者の方
• jQueryの使い方に少し不安がある方
• HTML/CSSはわかるけどJavaScriptがまだ苦手な方
• コピペしながら実際に動くUIを作りたい人

デモ紹介

今回のデモはこちら。

動きを実現する仕組み

jQueryのslideToggleというメソッドを使用し、HTML内のタイトル要素をクリック時に直後のエリアを開閉します。同時に、タイトル要素にクラス名を付与・除去することで、アイコンの形状を「+」から「-」へCSSで変化させます。

それではさっそく実装していきましょう〜〜〜

HTMLの準備

body内にアコーディオンのHTMLを記載しましょう〜

liタグの中に募集職種（以下タイトル）と募集内容（以下本文）を作ります。

またこの時、
タイトルに「js-acc-trigger」、本文に「js-acc-detail」というクラス名をつけておきましょう。
後のJSの制御で必要になります！

<div class="p-container">
　<div class="p-container__inner">
　　<h2>募集職種</h2>
　　<ul class="p-container__list">
　　　<li class="p-container__item">
　　　　<div class="ttl js-acc-trigger">1．Webディレクター</div>
　　　　<div class="txt js-acc-detail">ダミーです。ダミーです。ダミーです。ダミーです。</div>
　　　</li>
　　　<li class="p-container__item">　　　
　　　　<div class="ttl js-acc-trigger">2．Webデザイナー</div>
　　　　<div class="txt js-acc-detail">ダミーです。ダミーです。ダミーです。ダミーです。</div>
　　　</li>
　　　<li class="p-container__item">
　　　　<div class="ttl js-acc-trigger">3．Webエンジニア</div>
　　　　<div class="txt js-acc-detail">ダミーです。ダミーです。ダミーです。ダミーです。</div>
　　　</li>
　　</ul>
　</div>
</div>

CSSを書く

CSSを書いていきましょう〜段階別に説明しますね。

STEP1 レイアウト編

まずは大まかなレイアウトを整えます。

  .p-container__inner {
    width: 100%;
    max-width: 760px; // コンテンツ幅を指定
    margin: 0 auto; // 中央に配置
  }

  .p-container__item {
    padding: 15px; // 項目の余白を指定
    border-top: 1px solid #000; // 上部に枠線を指定
  }
  .p-container__item:last-child {
    border-bottom: 1px solid #000; // 一番下の職種には下部に枠線を指定
  }

  h2 {
    padding-top: 70px; // 「募集職種」の上部に余白を指定
  }

STEP2 「+」ボタンを作る

「+」ボタンをCSSで作ります。

  .ttl {
    position: relative;
    font-size: 20px;  // 職種名のフォントサイズを指定
    cursor: pointer;  // ホバー時にポインターにする
  }
  .ttl::before,.ttl::after {
    content: "";
    width: 20px;  // ＋の長さ
    height: 1px;  // ＋の太さ
    position: absolute;
    top: 50%;  // 中央に配置
    right: 20px;  // 右から20pに配置
    background: #000;  // 線は黒色に
    transition: all .5s ease;  // 滑らかに変形
  }
  .ttl::before {  // ボタンの横棒
    transform: rotate(0deg);  // 水平に配置
  }
  .ttl::after {  // ボタンの縦棒
    transform: rotate(90deg);  // 垂直に配置
  }

STEP3 ボタンをクリック後の「x」を作る

「+」をクリック後の形「x」を作ります。

  .ttl.is-acc-close::before {
    transform: rotate(45deg);  // 斜め45度に配置
  }
  .ttl.is-acc-close::after {
    transform: rotate(-45deg);  // 斜め-45度に配置
  }

STEP4 .txt部分は非表示に

.txt（本文）は非表示にしておきましょう。
ボタンをクリック後に表示させるようにするためです。

  .txt {
    display: none;
  }

こちらがCSSのまとめです。コピペして使ってね〜

  .p-container__inner {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
  .p-container__item {
    padding: 15px;
    border-top: 1px solid #000;
  }
  .p-container__item:last-child {
    border-bottom: 1px solid #000;
  }
  h2 {
    padding-top: 70px;
  }
  .ttl {
    position: relative;
    font-size: 20px;
    cursor: pointer;
  }
  .ttl::before,.ttl::after {
    content: "";
    width: 20px;
    height: 1px;
    position: absolute;
    top: 50%;
    right: 20px;
    background: #000;
    transition: all .5s ease;
  }
  .ttl::before {
    transform: rotate(0deg);
  }
  .ttl::after {
    transform: rotate(90deg);
  }
  .ttl.is-acc-close::before {
    transform: rotate(45deg);
  }
  .ttl.is-acc-close::after {
    transform: rotate(-45deg);
  }
  .txt {
    display: none;
  }

jQueryで動きのきっかけを指定する

JSの完成形はこんな感じです。段階的に説明しますね〜

  $(function () {
    $('.js-acc-trigger').on('click', function () {
      var findElm = $(this).next('.js-acc-detail');

      findElm.slideToggle();
      $(this).toggleClass('is-acc-close');
    });
  });

STEP1 ページが読み込まれたら処理を開始

ページ全体の読み込みが終わった後に、この中の処理を実行する記述を書きます。
ちなみにこの記述はjQueryの基本形です。

  $(function () {

  });

STEP2 クリックイベントの設定

見出し（.js-acc-trigger）をクリックしたときに、後ろの関数が実行される記述を追記します。

  $(function () {
　　$('.js-acc-trigger').on('click', function () {

　　}); // 追記
  });

STEP3 クリックされた要素のすぐ次の .js-acc-detail を取得

クリックした見出しに対応する本文を取得する記述を追記します。

  $(function () {
　　$('.js-acc-trigger').on('click', function () {
　　　var findElm = $(this).next('.js-acc-detail'); // 追記
　　});
  });

$(this)は、.is-acc-trigger（見出し）のことです。
.next('.js-acc-detail'); で、見出しの直後にあるもの、つまり開こうとしている本文を取得します。

そして開こうとしている本文を「findElm」という変数にあてています。
変数名は「findElm」以外に任意でつけることができます。
変数にあてることで、JSの記述を簡単にすることができます。

STEP4 アコーディオンを開閉する処理を追記

アコーディオンを開閉する記述を追記します。

  $(function () {
　　$('.js-acc-trigger').on('click', function () {
　　　var findElm = $(this).next('.js-acc-detail');

      findElm.slideToggle(); // 追記
      $(this).toggleClass('is-acc-close'); // 追記
　　});
  });

.slideToggleは、STEP3で作った変数 findElm（本文）が開閉する処理です。
$(this).toggleClass('is-acc-close');は、タイトルにクラス（is-acc-close）を「つけたり外したり」します。

おわり！！！！！！！
これでデモ通りになったと思います。
うまく実装できましたか？

1つだけ開く仕様にする場合

ちなみに今は、すべての項目が開閉できるようになっていますが、
アコーディオンが1つだけ開く（他の2つは閉じる）ようにすることもできます。

デモはこちら。

サンプルコードはこちら。

  $(function () {
    $('.js-acc-trigger').on('click', function () {
      var findElm = $(this).next('.js-acc-detail');
      
      $('.js-acc-detail').not(findElm).slideUp(); // 追記
      $('.js-acc-trigger').not(this).removeClass('is-acc-close'); // 追記
      
      findElm.slideToggle();
      $(this).toggleClass('is-acc-close');
    });
  });

先ほどのコードにハイライトの部分を追記するだけでOKです。

not(findElm)とは、今開こうとしているもの以外の要素です。
.slideUp()で、他の本文を閉じる（スライドで非表示）し、
.removeClass('is-acc-close')で、他の見出しの「開いている」状態をリセットします。

つまり、
開こうとしているもの以外の要素は閉じ、クラス名（.is-acc-close）も除去する
という記述です。

まとめ

最後に今回使用したセレクタとメソッドをまとめました。
参考になれば幸いです。

区分	種類	内容・例	説明
セレクタ	.js-acc-trigger	$('.js-acc-trigger')	アコーディオンのトリガーになる要素。クリックで詳細を開閉。
セレクタ	.js-acc-detail	$(this).next('.js-acc-detail')	トリガー要素の次にある詳細（本文）部分。
メソッド	.on()	.on('click', function() {…})	イベントリスナーを設定。ここではクリックイベントを指定。
メソッド	.next()	$(this).next('.js-acc-detail')	指定した要素の直後にある兄弟要素を取得。
メソッド	.not()	$('.js-acc-detail').not(findElm)	findElm 以外の全要素を取得。1つを除いて他を閉じる処理で使用。
メソッド	.slideUp()	$('.js-acc-detail').not(findElm).slideUp()	他の開いているアコーディオンをアニメーションで閉じる。
メソッド	.slideToggle()	findElm.slideToggle()	表示/非表示を切り替えるアニメーション付きのメソッド。
メソッド	.removeClass()	.removeClass('is-acc-close')	クラス（ここでは「閉じている状態」）を削除。
メソッド	.toggleClass()	.toggleClass('is-acc-close')	クラスのON/OFFを切り替える。開いていれば閉じ、閉じていれば開く状態に変更。

以上でした！
アコーディオンは使用頻度が高いので、ぜひ参考にしてみてください！
最後までご覧いただきありがとうございました〜