BLOG

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行追加するだけでおkです!
 
さらにslideToggle()の引数に数値をミリ秒で指定することでアコーディオンの開閉の時間が指定できます
以上、簡単ですがjQueryでのアコーディオンメニューの実装でした!
  

※参考サイト
http://hack.aipo.com/archives/1930/

Tweet about this on TwitterShare on FacebookShare on Google+