제이쿼리(JQuery) 슬라이드 효과 .slideDown(), .slideUp(), .slideToggle()

JQuery 에서는 다양한 애니메이션 효과를 함수로 제공하는데, 오늘은 슬라이드 효과에 대해서 알아보자.
JQuery에서는 함수를 이용하여 간단하게 요소를 숨기거나 슬라이드 효과를 줄 수 있다.

slide 관련 함수는 .slideDown(), .slideUp(), .slideToggle() 총 3가지가 있다.

 

slideDown()	아래로 슬라이드 되면서 요소를 보여줌
slideUp()	위로 슬라이드 되면서 요소를 숨김
slideToggle()	요소의 상태에 따라 위로 혹은 아래로 슬라이드

보통 우리가 보는 댓글 더보기나 FAQ 같은 곳에서 많이 쓰이고 있다.
간단하게 예제로 확인해 보자

<div class="component-box">
  <div class="component-title">슬라이드</div>
  <div class="component-contents">슬라이드 내용</div>
</div>

 

위와 같이 HTML을 작성 해준다.

.component-title을 클릭시 component-contents의 내용을 보여주려고 한다.

 

.component-title{font-size:18px;padding:10px;border: 1px solid #ddd;cursor: pointer;}
.component-title:hover{background-color: #eee;}
.component-contents{display:none;padding:2rem;border:1px solid #ddd;border-top:0;}

 

간단하게 CSS를 작성했는데, .component-contents 는 처음부터 보여줄게 아니라서 display:none; 처리해 준다.

 

$(".component-title").click(function(){
  $(this).siblings(".component-contents").slideToggle()
});

 

제이쿼리 위와 같이 코드만 만들어 주어도 slide가 작동하는 것을 볼 수 있다.

필자는 .component-title 하나의 버튼으로 동작하게 만들기 위해서, slideToggle()함수를 사용하였다.

닫기 버튼이 따로 만들고 싶다면 slideUp(), slideDown() 함수로 만드는 것이 좋다.

 

하지만 뭔가 아쉬운게 있다.

슬라이드 되는 메뉴가 한개 일때는 큰 상관이 없지만, 여러개가 존재한다면?

활성화 된 항목에 표시를 해두면 좋을 것 같아서 활성화 스타일을 추가했다.

 

.component-title.ative{color:#fff;padding:20px;background: #79caff;border-color:#79caff;}
.component-title.ative:hover{opacity: 0.6;}

 

CSS에 .acive라는 클래스를 추가했다.

이제 이 클래스를 Slide가 활성화 되었을 때 제목 .component-title에 배경색을 추가해주도록 하겠다.

 

if(!$(this).is(".ative")){
  $(this).addClass("ative")
 } else {
  $(this).removeClass("ative")
}

 

위와같이 제이쿼리에 조건문을 추가해서 .component-title 에 .active 클래스가 없을 경우에는 .active 클래스를 추가하고 ,없으면 .active 클래스를 제거하도록 만들었다.

 

최종코드 입니다.

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

 

오늘의 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다.