[Jquery] 더보기버튼 리스트 노출

더보기버튼을 눌렀을때, 숨겨있던 list가 노출되는 소스입니다.

리스트가 전부 노출됬을때 more 버튼이 사라집니다.

 

[HTML]

 <div class="list">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
    </div>
   <a href="#" id="load">MORE</a>

 

[js]

    $('.list > div').hide();
     $(".list > div").slice(0, 5).css("display", "block"); 
    $("#load").click(function(e){
        e.preventDefault();
        $(".list >div:hidden").slice(0, 5).fadeIn(200).css('display', 'block'); // 클릭시 more 갯수 지저정
        if($(".list >div:hidden").length == 0){ // 컨텐츠 남아있는지 확인
            $('#load').fadeOut(100); // 컨텐츠 없을 시 버튼 사라짐
        }
    });