jQueryUI에서 제공하는 Accordion을 이용해보자

이번에 소개할 내용은 어코디언기능이다.

보통 FAQ같은 한제목당 하나의 내용을 보여주고자 할때 

주로 사용된다

뭐... 쉽게 말해 영역을 아낄수 있는 방법중에 하나라고 생각된다!

스크립트코드

$(function(){
	$( "#accordion" ).accordion();
})

HTML 코드

<div id="accordion">
		<div>제목1</div>
		<div>내용1</div>
		<div>제목2</div>
		<div>내용2</div>
		<div>제목3</div>
		<div>내용3</div>
		<div>제목4</div>
		<div>내용4</div>
</div>

뭐 jqueryUI에서 제공하는 샘플에는 

<h2>제목1</h2>

<div>내용1</div>

이런식으로 되어있는데 

H2태그/DIV태그 형식을 지키지 않아도 되는거 같다.

1번째 태그 = 제목

2번째 태그 = 내용

형식으로 인식 시키는거 같다

실행화면

소스실행시 부드럽에 클릭위치에 포커스가 잡히면서 애니메이션 효과를 볼 수 있다