접었다 폈다하는 아코디언 메뉴 1

아코디언 메뉴중에서 가장 심플한 아코디언 메뉴 1번입니다. 
오늘 이야기하는 아코디언 메뉴는 웹디자이너를 위한 jquery 입니다.
이 메뉴는 이미지가 하나도 없습니다. 실무에서 바로 사용이 가능한 아주 간단한 메뉴입니다.
자바스크립트 아코디언 메뉴 =>  http://demun.tistory.com/2139 
jquery cookbook 의 아코디언 메뉴 =>  http://demun.tistory.com/2083 

먼저 전체 소스를 공개합니다.

accodion-1.html

여기서는 jquery 에 대한 이야기만 해보겠습니다.
주석을 상세하게 달아놧으니 이해가 가실겁니다.

$(function(){

	// 모든 패널이 펼쳐져있는 상태이기 때문에 dd의 첫번재를 제외한곳은 안보이게 설정합니다.
	$("dd:not(:first)").css("display","none");

	//dl 의 dt 를 클릭했을때
	$("dl dt").click(function(){

		// 만약 클릭한 태그 다음에 있는 dd 태그의 속성이 none 이면
		if($("+dd",this).css("display")=="none"){

			// dd 태그에 대해서 슬라이드업을 합니다. 즉 패널이 닫히는겁니다.
			$("dd").slideUp("slow");

			// 이어서 이접한 dd 에 슬라이드 다운을 합니다.
			$("+dd",this).slideDown("slow");
		}
	});
});