[ Jquery ] 아코디언 패널

아코디언 패널이란?

해당 구역을 클릭 시 아래로 펼쳐지는 제이쿼리 동작으로 애니메이션 효과도 줄 수 있다.

 

 

 

<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>

우선 jquery를 사용하기 위해서 jquery를 불러온다

 

HTML형식

<section class="example1">
	<h2>아코디언 패널 예시</h2>
	<p>해당 구역을 클릭 시 아래로 펼쳐지는 제이쿼리 동작입니다</p>
	<dl>
		<dt>프로젝트이름</dt>
		<dd style="display:none;">겜칭</dd>
		<dt>지금은 뭐하는거임?</dt>
		<dd style="display:none;">Jquery 아코디언패널</dd>
		<dt>왜 할려고??</dt>
		<dd style="display:none;">유저 프로필 눌렀을 때 메뉴목록 보여주게</dd>
	</dl>
</section>

dd 태그는 style = "display:none 이기 때문에 보이지 않는다.

 

Script문

$(function(){     
  $(".example1 dt").click(function(){
            
    if($(this).next().css("display") == "none"){
      $(this).next().slideDown(200);      
    }else{
      $(this).next().slideUp(200);      
    }
});

script문에서 class="example1인 엘리먼트가 click되었을 때에 함수를 정의해 놨다.

 

next()는 선택한 요소의 바로 다음에 위치한 형제요소를 가르킨다. 

 

display가 none으로 되어있을 경우에는 slideDown을 통해서 아래로 내려가는 애니메이션으로 dd에 있던 내용이 보여진다.

 

그 반대일 경우는 slideUp이 되어서 다시 dd태그가 안보이게 된다. 

 

 

실제화면

 프로젝트 이름을 눌렀을 때, 겜칭이라고 애니메이션 효과와 같이 글자가 보이게된다. 

 

 

전체 한번씩 눌렀을 때의 모습

 

다시 클릭하게되면 사라진 것을 볼 수 있다.