jQueryでアコーディオンパネルを簡単に自作する方法

Pocket

javascriptとjQueryの基本的な使い方についてまとめてきたので、実際に実用的なものを作ってみます。

まずはWebでもよく使うアコーディオンパネル。ECサイトのカテゴリーリストの開閉なんかでも使われることが多いです。ただ、プラグインを導入するほどでもないようなちょっとしたことが多いのでさくっと自作してみることにします。

jQuery自作するシンプルなアコーディオンパネル

ここでは以下のような要件を満たす機能を実装します。

  • 要素をクリックするとリストを表示
  • 表示中の要素をクリックすると閉じる
  • 表示中は−ボタン、閉じてるときは+ボタンを表示

今回ボタンにはFontAwesomeを使用します。HTMLの方はあまり深く考えず構造だけ作っていけばOK。リストは通常時に閉じてるのでcssでdisplay: noneを指定しておきます。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Accordion</title>
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    .accordion-panel{
      display: none;
    }
  </style>
</head>
<body>

<h1>SIMPLE ACCORDION</h1>

<div class="accordion">
    <div class="item">
      <a class="accordion-control">Title <i class="fa fa-plus"></i></a>
      <ul class="accordion-panel">
        <li>text1</li>
        <li>text2</li>
        <li>text3</li>
        <li>text4</li>
        <li>text5</li>
      </ul>
    </div>
    <div class="item">
      <a class="accordion-control">Title <i class="fa fa-plus"></i></a>
      <ul class="accordion-panel">
        <li>text1</li>
        <li>text2</li>
        <li>text3</li>
        <li>text4</li>
        <li>text5</li>
      </ul>
    </div>
    <div class="item">
      <a class="accordion-control">Title <i class="fa fa-plus"></i></a>
      <ul class="accordion-panel">
        <li>text1</li>
        <li>text2</li>
        <li>text3</li>
        <li>text4</li>
        <li>text5</li>
      </ul>
    </div>
  </div>

<script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/accordion.js"></script>
</body>
</html>

この時点では以下のような表示になります。
jQueryでアコーディオンパネルを簡単に自作する方法1

次にjQueryのコードを書きましょう。まずはクリックすると開閉するところから。
jQuery

$(function(){

  $('.accordion').on('click' , '.accordion-control', function(e){
    e.preventDefault();

    // クリックしたリストの開閉
    $(this)
      .next('.accordion-panel')
      .slideToggle();

  });

});

再読み込みしてtitle部分をクリックしてみるとリストが開いたり閉じたりするようになります。ここでやってることはこんな感じ。

  • .accordion-controlをクリックすると関数実行
  • e.preventDefault()でクリックイベントをストップ
  • クリックしたもの(this)の隣にある.accordion-panelを取得
  • slideToggle()で開閉

さらにボタンの切り替えも追加します。

jQuery

$(function(){

  $('.accordion').on('click' , '.accordion-control', function(e){
    e.preventDefault();

    // 現在のアイコン状態で+にするか−にするか判定
    if($(this).children('i').is('.fa-minus')){

      // +アイコンに変更
      $(this).children('i')
        .removeClass()
        .addClass('fa fa-plus');

    }else{

      // −アイコンに変更
      $(this).children('i')
        .removeClass()
        .addClass('fa fa-minus');

    }

    // クリックしたリストの開閉
    $(this)
      .next('.accordion-panel')
      .slideToggle();

  });

});

開閉機能の上にアイコン切り替え操作を追加しました。ここでは以下のようなことをやってます。

  • i要素のクラス名で操作を分ける
  • クラス名がfa-minusなら+に変更
  • そうでなければ、−に変更

ここではクリックしたところのアイコンだけ変更しなければならないので、$(this)を使ってクリックした要素を取得し、さらにchildren('i')でi要素を取得しています。

ブラウザで見てみるとうまく切り替えできているのがわかります。
jQueryでアコーディオンパネルを簡単に自作する方法2

このように簡単な機能ならjQueryでさくっと実装できるので、要件に合わせて機能豊富なプラグインと軽い自作コードを使い分けてみると良いでしょう。

ちなみに今回使用したjsファイルは600バイトくらい。プラグイン使うと10〜50KBくらいあるのでその差は歴然です。