CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Codecraker
Codecraker

Reputation: 337

Jquery code for load more content is not working

I have 20 div with same class. I want to show first 3 div when page is loaded then when click load more it will show another 5 and so on. I got some basic codes from internet but failed to implement those.

var size_item = $('.listing').length();
var v=3;
$('.listing:lt('+v+')').show();
$('#load_more').click(function () {
    v= (v+5 <= size_item) ? v+5 : size_item;
    $('.listing:lt('+v+')').show();
});

I'm giving you my fiddle codes DEMO

Upvotes: 2

Views: 2346

Answers (2)

parthu gajera
parthu gajera

Reputation: 39

$('#load_more').click(function () {
  var data = [1,2,3,4,5];
  var html = '';
  $.each(data, function(key,val) {
    html += '<div id="load_more">';
    html += '<center>';
    html += 'Load More';
    html += '</center>';
    html += '</div>';
  });
  $('#load_more').append(data);  
});

Upvotes: 0

Kiran Dash
Kiran Dash

Reputation: 4956

$(document).ready(function(){   
  //show more option
    var size_item = $('.listing').length;
    var v=3;
    $('.listing').hide(); // hide all divs with class `listing`
    $('.listing:lt('+v+')').show();
    $('#load_more').click(function () {
        v= (v+5 <= size_item) ? v+5 : size_item;
        $('.listing:lt('+v+')').show();
        // hide load more button if all items are visible
        if($(".listing:visible").length >= size_item ){ $("#load_more").hide(); }
    });
});
.listing{
  color:red;
  border:2px solid black;
  padding:12px;
  margin:8px;
}
.listing:hover{
  background-color:black;
  color:magenta;
}
#load_more{
  color:green;
  background-color:white;
  cursor:pointer;
  margin-top:20px;
  margin-bottom:20px;
}
#load_more:hover{
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
 text here 1
</div>
<div class="listing">
 text here 2
</div>
<div class="listing">
 text here 3
</div>
<div class="listing">
 text here 4
</div>
<div class="listing">
 text here 5
</div>
<div class="listing">
 text here 6
</div>
<div class="listing">
 text here 7
</div>
<div class="listing">
 text here 8
</div>
<div class="listing">
 text here 9
</div>
<div class="listing">
 text here 10
</div>
<div class="listing">
 text here 11
</div>
<div class="listing">
 text here 12
</div>
<div class="listing">
 text here 13
</div>
<div class="listing">
 text here 14
</div>
<div class="listing">
 text here 15
</div>
<div class="listing">
 text here 16
</div>
<div class="listing">
 text here 17
</div>
<div class="listing">
 text here 18
</div>
<div class="listing">
 text here 19
</div>
<div class="listing">
 text here 20
</div>
<div class="listing">
 text here 21
</div>
<div class="listing">
 text here 22
</div>
<div class="listing">
 text here 23
</div>
<div class="listing">
 text here 24
</div>
<div class="listing">
 text here 25
</div>
<div class="listing">
 text here 26
</div>
<div id="load_more">
  <center>
    Load More
  </center>
</div>

You were almost there. Just a few changes:

  1. length is not a function so changed length() to length

  2. initially all the divs should be hidden thus the code $('.listing').hide(); is added which will hide all divs with class listing and then on clicking on #load_more 5 new items will be shown.

  3. load more button will get hidden after 20 or more items are loaded. (implemented by checking the length of visible items)

Upvotes: 2

Related Questions