jQueryでアコーディオンを設置（自分用基本jsファイルに設定）

jQueryで開閉式アコーディオンを設置する際の備忘録。
基本のjsファイルに記述していつでも使えるように。

アコーディオンの開閉ボタンとしたい要素に「accordion_click」をクラス指定し、
アコーディオンの中身となる要素に「accordion」をクラス指定する場合の設定方法。

必要なもの

headでjQueryファイルの読み込み。
以下記述内容。

htmlの記述

<span class="accordion_click">ここをクリックでアコーディオン開閉</span>

<div class="accordion">
<!--ここにアコーディオンの中身-->
</div>

accordion_clickをクラス指定した要素をクリックでアコーディオンの開閉を行う。
accordionをクラス指定した要素がアコーディオンの中身になる。

cssの記述

.accordion_click {cursor:pointer;}

accordion_clickの要素をマウスポインター表示に。

javascriptの記述

<script type="text/javascript">
$(function(){
	$(".accordion").hide();
	$(".accordion_click").click(function(){
		$(".accordion").slideToggle();
	});
})

$(function(){
	$(".accordion_click").click(function () {
		$(this).toggleClass("clickImg");
	});
});
</script>

画面表示時の最初はアコーディオンが閉じている状態。accordion_clickの要素をクリックでアコーディオンが開く。
slideToggleでスライドダウンのアニメーションで表示。
もう一度accordion_clickの要素をクリックでアコーディオンが閉じる。
クリックで繰り返し。

accordion_click要素をクリック時、clickImgがクラスに追記される。
クリック時に画像を差し替えたい場合や、スタイル変更したい場合はcssにclickImgクラスのスタイルを記述する。