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をスライドアップで非表示にします。

ブログ記事に戻る