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だけでアコーディオンの実装ができちゃうので、ぜひ気軽に試してみてください！