jQueryを使った簡単アコーディオン実装のやり方（複数実装OK）

アコーディオン実装までの手順

この記事ではタイトル通り、jQueryでアコーディオンを実装するやり方をまとめていきます。複数の実装もできるので、参考にしてみてください。（jQueryを使うので、ファイルの読み込みを忘れずに！）

◯実装までの手順
1. クリック部分とコンテンツ部分を作る
2. コンテンツ部分を隠す+クリック部分に機能を実装

コードだけ知りたいという場合は以下を参考にどうぞ！

See the Pen Code for accordion function by Koharu Homma (@khomma) on CodePen.

STEP1: クリック部分とコンテンツ部分を作る(HTML, CSS)

まずはHTMLで、クリック部分とアコーディオン機能で表示したいコンテンツ部分を作っていきます。クリック部分をaccordion-clickクラスを持つdivタグで囲み、そのすぐ下のコンテンツ部分をaccordion-contentクラスを持つdivタグで囲みます。また、CSSで好きなようにスタイルもつけておきます。

index.html

    <div id="accordion">
        <div class="accordion-click">
            <p>ここをクリック</p>
        </div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, quod. Fugit excepturi, odit. Doloremque explicabo suscipit dignissimos earum reprehenderit rerum!</p>
        </div>
    </div>

STEP2: コンテンツ部分を隠す+クリック部分に機能を実装（jQuery）

次にjQueryでアコーディオン機能を実装しますが、やることが２つあります。
1. コンテンツ部分をhideメソッドで非表示にしておく
2. クリック部分をクリックした時に、コンテンツ部分がスライド表示されるようにする

まずはコンテンツ部分を$('.accordion-content').hide();として、非表示にします。

次にクリック部分の機能を実装していきます。.accordion-clickがクリックされた時、その次にある要素.accordion-contentをスライド表示すればいいですね。最終的なコードが以下です。

script.js

$(function() {
    $('.accordion-content').hide();

    $('.accordion-click').click(function() {
        $(this).next().slideToggle();
    });
});

slideToggle()はアコーディオンが開いているか閉じているかに合わせて、自動で動きを変えてくれる関数です。また、$(this).next()でコンテンツ部分を指定するので、アコーディオンを複数に増やした時も対応できます。

まとめ

以上の数行のjqueryだけでアコーディオンの実装ができちゃうので、ぜひ気軽に試してみてください！