jQueryで超簡単に出来るアコーディオンメニュー

jQueryでアコーディオンメニュー

最近スマホサイトやモバイル対応のコーディングをすることが多いのですが
モバイルサイトはどうしても縦に長くなりがちです

そこで、今回プログラム初心者の私がjQueryでアコーディオンメニューを実装してみました(^O^)
作り方は超かんたん！

<dl>
	<dt>メニューボタン1</dt>
	<dd>内容</dd>
	<dt>メニューボタン2</dt>
	<dd>内容</dd>
	<dt>メニューボタン3</dt>
	<dd>内容</dd>
	<dt>メニューボタン4</dt>
	<dd>内容</dd>
	<dt>メニューボタン5</dt>
	<dd>内容</dd>
</dl>

このようなリストを作成して

$(function(){
	$("dl dt").click(function () {
		$(this).next().slideToggle();
	});
});

たったこれだけのコードを書くだけでヌルっと動くアコーディオンメニューが作れちゃいます！
ポイントは.next()でdt要素の次に来るdd要素を指定してあげるところです
これで複数のメニューがある場合でも一括で指定することが出来ました（＾－＾）b
また、開閉時にクラスを付けてやりたいときは

$(function(){
	$("dl dt").click(function () {
		$(this).next().slideToggle();
		$(this).toggleClass("開いた時のクラス名")
	});
});

こんなかんじで1行追加するだけでおｋです！
さらにslideToggle()の引数に数値をミリ秒で指定することでアコーディオンの開閉の時間が指定できます
以上、簡単ですがjQueryでのアコーディオンメニューの実装でした！

Tweet