sliding

by Kim Ara

HTML

<button class="btn01">slideUp!</button>
<button class="btn02">slideDown!</button>
<button class="btn03">slideToggle!</button>

<div class="owl-stage">
<div class="owl-item">
  <div class="item">
  <a href="#wrangler-sport">
    <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/sport/2017-Jeep-Wrangler-VLP-Modelizer-Side-Profile-Sport.png.image.300.png" alt="Wrangler Sport">
    <p>SPORT<br>￦39,900,000</p>
  </a>						
  </div>
 </div>
 
<div class="owl-item">
  <div class="item">
  <a href="#wrangler-sahara">
    <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/sahara/2017-Jeep-Wrangler-Unlimited-VLP-Modelizer-Side-Profile-Sahara.png.image.300.png" alt="Wrangler Sahara">
    <p>SAHARA<br>￦51,400,000</p>
  </a>
  </div>
</div>
  
<div class="owl-item">
  <div class="item">
  <a href="#wrangler-rubicon-2">
    <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/rubicon-2/2017-Jeep-Wrangler-VLP-Modelizer-Side-Profile-Rubicon.png.image.300.png" alt="Wrangler Rubicon 2-door">
    <p>RUBICON 2-door<br>￦46,400,000</p>
  </a>	
  </div>
</div>

<div class="owl-item">
  <div class="item">
    <a href="#wrangler-rubicon-4">
      <img src="http://www.jeep.co.kr/17_wrangler/images/vlp/Modelizer/rubicon-4/2017-Jeep-Wrangler-Unlimited-VLP-Modelizer-Side-Profile-Rubicon.png.image.300.png" alt="Wrangler Rubicon 4-door">
      <p>RUBICON 4-door<br>￦48,400,000</p>
    </a>										
   </div>
</div> 
</div>


<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>
<div class="view">저를 누르고 저만 눌렀다는 글이 나오게끔 해주세요.</div>

CSS

img{width:100%}
.owl-stage{width:800px;margin:20px 0}
.owl-stage:after{content:'';display:block;clear:both}
.owl-item{float:left;width:25%}
.item p{font-size: 14px; font-weight: 700; margin: 4% 0; font-family: Roboto; color: #000;text-align: center; line-height: 17px;}


.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

JavaScript

$(document).ready(function(){

  $('.btn01').click(function() { 
    $('.owl-item p').slideUp('slow');     
  }); 
  $('.btn02').click(function() { 
    $('.owl-item p').slideDown('slow');
  });
  $('.btn03').click(function() { 
    $('.owl-item p').slideToggle('slow');
  });

	$('.view').click(function(){
  	$(this).text('저만 클릭 하셨군요 ^ㅡ^');  
  });

});