Jquery, Javascript
[Jquery] 컨텐츠, 게시물 더보기 버튼 만들기 (more 버튼)
준오네
2022. 8. 10. 08:46
반응형
컨텐츠나 게시물이 너무 많을시 한번에 다 노출되는 것보다
조금씩 노출시켜서, Jquery를 사용해
더보기 버튼을 만들어 깔끔하게 노출 시킬수 있습니다.
<style>
div { display:none; }
</style>
초기에 컨텐츠에 display:none 을 지정해주어야 합니다.
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<a href="#" id="load">더 보기</a>
더보기 버튼에 id를 지정해 줍니다.
저는 load id를 지정해주었습니다.
<script>
$(function(){
$("div").slice(0, 1).show(); // 초기갯수
$("#load").click(function(e){ // 클릭시 more
e.preventDefault();
$("div:hidden").slice(0, 1).show(); // 클릭시 more 갯수 지저정
if($("div:hidden").length == 0){ // 컨텐츠 남아있는지 확인
alert("게시물의 끝입니다."); // 컨텐츠 없을시 alert 창 띄우기
}
});
});
</script>
하단에 스크립트를 넣어줍니다.
상황에 따라 갯수를 수정해서 사용 가능합니다.
더보기 버튼을 눌러서 컨텐츠를 more 할수 있습니다.
반응형