0
  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);
});
TDG
  • 1,294
  • 4
  • 18
  • 50
  • 2
    Possible duplicate of [jQuery load first 3 elements, click "load more" to display next 5 elements](http://stackoverflow.com/questions/17736786/jquery-load-first-3-elements-click-load-more-to-display-next-5-elements) – guradio Sep 03 '16 at 10:29
  • @guradio Thanks.. but 2 things missing from this script.. 1. Show more link have to disable once reached maximum 2. Have to show (3 out of 8) like this. – TDG Sep 03 '16 at 10:36

1 Answers1

0

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

Ehsan
  • 12,655
  • 3
  • 25
  • 44
  • Hi @ehsan... almost there.. but on load it shows '3 out 8'.. on click, it have to show '6 out of 8'.. but it shows only '3 out of 8'..Thanks – TDG Sep 03 '16 at 10:59
  • @TDG , you want when load page show li1,li2,li3 and when click, show li4,li5,li6,li7,li8????? – Ehsan Sep 03 '16 at 11:05
  • Sorry boss.. on load we are showing 3 items, so it shows 'Showing 3 out of 8' correctly. when 6 items visible, it have to show 'Showing 6 out of 8'. On next click.. remaining 2 items will be loaded..so 'Showing 8 out of 8'. That it. You almost provided solution.. only this logic is missing. dont need hand coded value. it have to be dynamic. Thanks – TDG Sep 03 '16 at 11:15
  • Edited my answer. Please let me know.. Thanks – TDG Sep 03 '16 at 11:17
  • Thanks.. i figured out the solution – TDG Sep 03 '16 at 11:58