[Jquery] 클릭시 슬라이드 sildeup(),slidedown(),slidetoggle()

웹에서 클릭했을시 클래스가 있는 다른 div박스를 slide하는 방법입니다.

 

slideDown() : slide되면서 내려옴

slideUp() : slide되면서 올라감(사라짐)

slideToggle() : slide되면서 내려옴, 올라감

 

.box{width:200px;height:200px;background:#ff0000;display:none;}

일단 박스를 200x200사이즈로 셋팅해놓고 display는 none해놓았습니다. 빨간 상자가 숨어져있음.

 

<div class="click">클릭</div>
<div class="box"></div>

html코드는 두개만 설정헀고 스크립트 는 head안에 넣었습니다.

 

$(document).ready(function(){
  $(".click").click(function(){
  $(".box").slideToggle();
  });
});

 

클릭텍스트를 클릭시 빨간상자가 slide되면서 내려오고 올라갑니다.