더 보기 버튼으로 게시물 리스트 만들기

 

제이쿼리 더보기 버튼으로 게시물리스트 구현   <style> div { display:none; } </style>   <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> <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> <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> <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> <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>         $(function(){     $("div").slice(0, 10).show(); // select the first ten     $("#load").click(function(e){ // click event for load more         e.preventDefault();         $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them         if($("div:hidden").length == 0){ // check if any hidden divs still exist             alert("No more divs"); // alert if there are none left         }     }); });

 

참조 : https://jquery.com/

참조 : https://jqueryui.com/