[Jquery] 컨텐츠, 게시물 더보기 버튼 만들기 (more 버튼)

컨텐츠나 게시물이 너무 많을시 한번에 다 노출되는 것보다

조금씩 노출시켜서, 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 할수 있습니다.