jQuery Accordion Demo

Code

$(function()
{
	$('div.menu ul:not(:first)').css('display', 'none');
	$('div.menu h2').css('cursor' ,'pointer')
	.click(function()
	{
		$(this).next().slideDown(600).siblings("ul:visible").slideUp(600);
	});	
});

解説

1. .menuが付加されたdiv内で先頭のul以外のulを非表示にします。(:notと:firstを利用)
2. クリックボタンとなるh2の上にマウスを乗せるとカーソルがポインタになるようにします。
3. クリックイベントを設定します。
4. クリックされたh2の直後のulをスライドダウンして表示にします。
5. siblingsで兄弟要素を全て取得し、:visibleで現在表示されているulを除外して残りのulをスライドアップで非表示にします。

ブログ記事に戻る