간단하게 hide와 show를 사용해 구현을 하고 아이콘을 받아서 더보기 버튼을 만들어 구현 하였습니다. 그리고 short버튼을 누를 시 scrolltop을 이용해 위로 다시 스크롤을 올리게 하였습니다.
$(document).ready(function(){
if(window.matchMedia("screen and (max-width: 768px)").matches)
$(function () {
$('.box img').hide();
$('.box img').slice(0,4).show();
$('.arrow').click(function(){
if($('.up').hasClass('more')){
$('.up').addClass('close').removeClass('more');
if(window.matchMedia("screen and (max-width: 430px)").matches)
{
$('.box img').slice(1,10).hide();
$('html,body').animate({scrollTop:1200},800);
}else
{
$('.box img').slice(4,10).hide();
$('html,body').animate({scrollTop:1350},800);
}
}
else if($('.up').hasClass('close')){
$('.up').removeClass('close').addClass('more');
if(window.matchMedia("screen and (max-width: 430px)").matches)
$('.box img').slice(1,10).show();
else
$('.box img').slice(4,10).show();
}
});
});
if(window.matchMedia("screen and (max-width: 430px)").matches)
$(function () {
$('.box img').hide();
$('.box img').slice(0,1).show();
});
});
x
x
지금까지 해온 것을 종합하여 생각대로 짜다보니 어렵지 않게 구현할 수 있었습니다.
이처럼 더욱 배워서 다른 것을 하더라도 쉽게 로직이 머리 속으로 짤 수 있게 되었으면 좋겠습니다.