TDG TDG - 3 months ago 9
jQuery Question

Show no of li and disable div on reach total size


  1. Show 3 items on load (Have to show like '3 out of 8')

  2. On click 'show-items' show next 3 items (Have to show like '6 out of 8')... like wise for each click until total size reach.

  3. Once total size reached, disable 'show-items' (ex: if its 8 out of 8).



I used below code to show/hide li based on click. But, i am not sure how to bring 3 out 8 items script.

Thanks for your valuable inputs.

HTML:

<ul class="gallery-items">
<li class="gallery-item">
<div class="item">Test1</div>
</li>
<li class="gallery-item">
<div class="item">Test2</div>
</li>
<li class="gallery-item">
<div class="item">Test3</div>
</li>
<li class="gallery-item">
<div class="item">Test4</div>
</li>
<li class="gallery-item">
<div class="item">Test5</div>
</li>
<li class="gallery-item">
<div class="item">Test6</div>
</li>
<li class="gallery-item">
<div class="item">Test7</div>
</li>
<li class="gallery-item">
<div class="item">Test8</div>
</li>
</ul>

<div class="show-items">
Showing <span class="item_shown">3</span> out of <span class="item_total">8</span> deals
</div>


JS:

var $items_list = $(".gallery-item li").size();
var $list_item = 3;
$('.gallery-item li:lt(' + $list_item + ')').show();
if($items_list < $list_item){
$('#load-more').hide();
}

$('.show-items').click(function() {
$list_item = ($list_item + 3 <= $items_list) ? $list_item + 3 : $items_list;
$('.gallery-item li:lt(' + $list_item + ')').show();
$(this).toggle($list_item < $items_list);
});

Answer

Try this :

$(document).ready(function(){

    var i = 3;

    $(".gallery-item").slice(0,3).show(500);

    $(".show-items").on("click",function(){

        if (i < $("li.gallery-item").length) {

            $(".gallery-item").slice(i,i + 3).show(500);

            i = i + 3;
         }
    })
})

Here is Demo