수평 아코디언 메뉴 살펴보기

jquery cookbook 에 수평 아코디언 메뉴가 있습니다. 좀더 배우고 익히고자 이렇게 글을 씁니다.
제이쿼리 수평 아코디언 메뉴는 쿡북 예제 사이트에서 코드와 데모 화면을 볼 수 있습니다.

우선 어떤 방식인지 대략 살펴봅니다.
첫번째 화면.

첫화면으로 빨강색으로 펼쳐져있는 모습입니다.

 두번째 화면.

Green을 클릭했을때 이동하는 모습입니다.

 세번째 화면.
 

Green이 왼쪽으로 이동완료한 화면.

즉 이미지를 클릭하면 왼쪽, 오른쪽으로 이동하는 아코디언 메뉴입니다.
전체코드는 아래 첨부한 파일을 다운로드 받아서 클릭해보시면 알 수 있습니다. 
단 jquery 코드와 이미지 , 그리고 css 설정은 예제사이트의 주소로 했습니다.

horizontalAccordion.html

 
전체코드는 내용이 길어 생략합니다. 파일을 다운로드 받아서 보시기 바랍니다.
여기서 jquery 부분을 살펴보겠습니다.
먼저 코드를 보시죠.

$.fn.horizontalAccordion = function (speed) {
	return this.each(function () {
		var $accordionHeaders = $(this).find('h3'),
		$open = $accordionHeaders.next().filter(':first'),
		width = $open.outerWidth();
	    
		// initialise the display
		$accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0 });

		$accordionHeaders.click(function () {
			if ($open.prev().get(0) == this) {
				return;
			}

			$open.animate({ width: 0 }, { duration : speed });
			$open = $(this).next().animate({ width : width }, { duration : speed });
		})
	});
};

$(document).ready(function () {
	$('#accordionWrapper').horizontalAccordion(200);
});

설명.

var $accordionHeaders = $(this).find('h3');

$accordionHeaders 에 h3 를 찾아 담습니다. 그리고 아래의 것들도 같이 담습니다.

$open = $accordionHeaders.next().filter(':first')

위에서 담은 즉 h3의 다음요소중에서 첫번째 요소만을 필터링해서 open이라는 변수에 담습니다.

width = $open.outerWidth();

현재 패널의 너비 정보를 담고 있습니다. 이 모든것을 $accordionHeaders 라는 변수에 모두 담았습니다.

$accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0 });

출력을 초기화 합니다.
위에서 필터링한 즉 첫번째 요소만 필터링해서 $open에 담았는데요. 여기서는 안담은 요소 즉 :not 아닌것 뭐가 아닌것??? :first 첫번째가 아닌것만을 필터링해서 선택합니다.
즉 두번째줄 $open .... 에서 필터링한 요소가 아닌 모든것을 말합니다. 이요소를 css 설정으로 안보이게 합니다.
첫번째 패널을 제외한 다른 모든 패널의 너비가 0이여야만 안보이게 됩니다. 즉 첫번째는 보이고 나머지는 감추는 효과입니다.

$accordionHeaders.click(function () {
	if ($open.prev().get(0) == this) {
		return;
    }

부분은 클릭이벤트를 추가합니다. h3로 돌아가기이해 .prev 를 사용해서 앞요소로 이동하며, 클릭된 요소가 현재의 컨텍스트와 동일한지 검사합니다.

$open.animate({ width: 0 }, { duration : speed });
$open = $(this).next().animate({ width : width }, { duration : speed });

위에서 일치하는지 검사한 후 선택된 요소가 열려있는 패널이라면 너비를 0으로하고 애니메이션이 진행됩니다.
만약 열려있지 않다면 패널의 너비는 있는 너비 그대로 애니메이션을 진행합니다.
마지막줄에 제이쿼리를 반환하는데 현재 열리고 있는 패널을 애니메이션하는 중이기에 현재 시점의 패널을 $sopen 변수로 재할당하여 가장 최근의 패널로 설정하고 있습니다.

위 에제의 코드는 여기에서 볼 수 있습니다. 클릭해보시면 이해가 가실겁니다.
저작권과 참고는 http://jquery-cookbook.com 입니다.