Load more posts on click using jQuery
DEMO: https://jsfiddle.net/gmkhussain/hd4603gj/
HTML=========
<h2>Load More Posts</h2>
<div id="allpost">
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="loadmore">Load More</div>
</div>
CSS======
<style>
.post-box {
border: 1px solid #39c;
margin: 0 0 20px;
padding: 20px;
display:block;
}
.notvis {background-color:#eee; display:none;}
.post-box:nth-child(1), .post-box:nth-child(2) {
display: block;
}
.loadmore {
background-color: #39c;
color: #fff;
padding: 20px;
width: 140px;
text-align: center;
border-radius: 30px;
float: none;
margin: 0 auto;
}
</style>
JS==========
<script>
$(document).ready(function () {
$(".post-box").addClass("notvis");
total = $("#allpost .post-box").size();
x = 2;
//alert("total"+ total);
$('.loadmore').click(function () {
//y = x;
$(total);
alert(x);
$(".post-box").removeClass("notvis");
$(".post-box:gt("+x+")").addClass("notvis");
x = x + 1;
});
});
</script>
HTML=========
<h2>Load More Posts</h2>
<div id="allpost">
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="post-box" id="hari1">
<div class="post-img col-sm-3">
<img width="155" height="136" src="http://localhost/projects/summer-blog/wp-content/uploads/2015/12/image1-1.jpg" class="attachment-full size-full wp-post-image" alt="image1"> </div>
<div class="post-content col-sm-9">
<h3>Fifth Blog Heading Goes Here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate… <!--<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque natibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec pellentesque eu pretium uis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae justo Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum sempjr niig</p>-->
<span class="date pul-lft">21 December, 2015<!--14 August, 2015--></span>
<span class="readmore pul-rgt"><a href="http://localhost/projects/summer-blog/2015/12/21/fifth-blog-heading-goes-here/">Read More</a></span>
</div>
</div>
<div class="loadmore">Load More</div>
</div>
CSS======
<style>
.post-box {
border: 1px solid #39c;
margin: 0 0 20px;
padding: 20px;
display:block;
}
.notvis {background-color:#eee; display:none;}
.post-box:nth-child(1), .post-box:nth-child(2) {
display: block;
}
.loadmore {
background-color: #39c;
color: #fff;
padding: 20px;
width: 140px;
text-align: center;
border-radius: 30px;
float: none;
margin: 0 auto;
}
</style>
JS==========
<script>
$(document).ready(function () {
$(".post-box").addClass("notvis");
total = $("#allpost .post-box").size();
x = 2;
//alert("total"+ total);
$('.loadmore').click(function () {
//y = x;
$(total);
alert(x);
$(".post-box").removeClass("notvis");
$(".post-box:gt("+x+")").addClass("notvis");
x = x + 1;
});
});
</script>
where to add this javascript code in wordpress?
ReplyDelete